/* Page header and widgets shared by every Argos 2.0 page. Loaded after each page's own styles.
   The header must stay readable at any window width: it wraps onto more rows instead of squeezing
   or clipping its contents. */
/* The header looks the same on every page: ALL of its look is set here, whatever the page's own styles say. */
.hdr { display:flex !important; align-items:center; height:auto !important; min-height:46px; flex-wrap:wrap; row-gap:2px; column-gap:14px !important; padding:6px 14px !important;
  background:var(--h-161b22) !important; border-bottom:1px solid var(--h-30363d) !important; font-family:Inter,system-ui,sans-serif; font-size:13px; line-height:1.45; }
/* The header stays at the top of the window when a page scrolls (owner, 2026-10-09: "keep the top and bottom banner always in front"). The bottom banner is fixed by auth.js. */
.hdr { position:sticky !important; top:0; z-index:90; }
html.hdr-wait .hdr > :not(.hdr-brand) { visibility:hidden; } /* 0.76.1: until auth.js has drawn the header whole (see theme.js) */
.hdr > * { flex-shrink:0; }
.hdr .hdr-title { flex:1 1 auto; white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:15px !important; font-weight:700 !important; color:var(--h-e6edf3); display:block; }
/* Header links are large and bright enough to read from the chair (owner, 2026-10-09: "increase the font and size of the icons on the
   banner - this will help with vision impaired customers"): 15 px words and 20 px icons on a wide screen, a step smaller as the
   window narrows so the header stays at two rows. Sizes are set here and in the two media rules below, nowhere else. */
.hdr a { white-space:nowrap; padding:4px 0; font-size:15px !important; text-decoration:none !important; }
.hdr > a { color:var(--h-c9d1d9) !important; font-weight:500; }
.hdr > a:hover { color:var(--h-58a6ff) !important; }
.hdr > a.here { color:var(--h-e6edf3) !important; font-weight:500 !important; text-shadow:.5px 0 currentColor, -.5px 0 currentColor; } /* the page you are on - drawn bold by a shadow, not a heavier font, so it is no wider and the links beside it do not move from page to page (0.76.1) */
/* The menu stands still from page to page (0.76.1; owner, 2026-10-15: "the menu jumps around when i click on a button - its very
   annoying"). The logo and the page's tag take the same room on every page - room for the longest tag, "Configure alarms" - so where
   the row breaks, and so where every link lands, no longer depends on what the page is called. The end is ONE small button with the
   person's initials (0.77.1, .hdr-end, auth.js): no second row for a name. */
.hdr .hdr-end { display:flex; align-items:center; gap:4px; margin-left:auto; flex:none; }
@media (min-width:701px) { .hdr .hdr-title { flex:1 0 450px; } }
@media (min-width:1501px) { .hdr .hdr-title { flex-basis:480px; } }
@media (max-width:700px) {
  .hdr .hdr-title { flex-basis:100%; }
}

/* Nothing a person presses is ever painted as selected text (0.75.1; owner, 2026-10-15: "these are highlighting also - need to
   check that on all pages - it looks bad when that happens"): a double click on Delete... or a drag across a row of buttons
   selected their words. Every page loads this file, so the rule is here once. Typed text stays selectable. */
:where(button, summary, label, select, [role="button"], [role="tab"], .hdr a, .sec-tabs a, .kick-btn, .net-chip, .g-ant, a.btn, a.btn-sm, a.rc-btn, a.mt-btn, a.pb-open, a.tile-rec, a.al-doc, a.live-back, a.ap-pulse, dialog h2, dialog h3) { -webkit-user-select:none; user-select:none; }
:where(input, textarea, [contenteditable="true"]) { -webkit-user-select:text; user-select:text; }

/* ── widgets (live tiles) ── */
.tile { cursor:pointer; transition:border-color .12s; min-width:0; }
.tile:not(.alarm):not(.comm):not(.quality):hover { border-color:var(--h-58a6ff); }
.tile .name a { color:inherit; text-decoration:none; }
.tile .name a:hover { color:var(--h-58a6ff); }
.tile .open { color:var(--h-8b949e); font-size:11px; text-decoration:none; white-space:nowrap; }
.tile .open:hover { color:var(--h-58a6ff); }
/* a value row of a list widget: name, two-hour history line with its high and low, value */
.tile .row { align-items:center; min-height:33px; } /* an on/off row is as tall as a row with a history line */
.tile .row .row-lab { flex:0 1 auto; min-width:0; overflow-wrap:anywhere; }
.spark { flex:1 1 60px; min-width:0; display:flex; align-items:center; gap:6px; height:26px; }
.spark svg { flex:1 1 auto; min-width:0; width:100%; height:26px; display:block; }
.spark-hl { display:flex; flex-direction:column; font-size:9px; line-height:1.25; color:var(--h-8b949e); font-variant-numeric:tabular-nums; white-space:nowrap; flex-shrink:0; }
/* foot of a widget: connection symbol + where the device is */
.tile-net { display:flex; align-items:center; gap:7px; margin-top:8px; flex-shrink:0; padding-top:7px; border-top:1px solid var(--h-21262d); font-size:11px; color:var(--h-8b949e); min-width:0; }
.tile-net .net-state { display:inline-flex; color:var(--h-6e7681); flex-shrink:0; }
.tile-net .net-state.up { color:var(--h-3fb950); }
.tile-net .net-state.down { color:var(--h-f85149); }
.tile-net .net-ico { width:18px; height:18px; display:block; }
.tile-net .net-cloud { display:inline-flex; color:var(--h-6e7681); flex-shrink:0; }
html[data-cloud="ok"] .tile-net .net-cloud { color:var(--h-3fb950); }
html[data-cloud="bad"] .tile-net .net-cloud { color:var(--h-f85149); }
.tile-net .net-cloud.net-cloud-every { display:none; }
html[data-cloud-every="1"] .tile-net .net-cloud.net-cloud-every { display:inline-flex; }
.tile-net .net-addr { font-family:ui-monospace,Consolas,monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:0 1 auto; }
.tile-net a.net-addr { color:var(--h-58a6ff); text-decoration:underline; text-underline-offset:2px; } .tile-net a.net-addr:hover { color:var(--h-f0f6fc); }
.tile-net .net-drv { margin-left:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:0 2 auto; }
.tile-net .info-btn { flex-shrink:0; }
.tile-net .net-chip { margin-left:auto; display:inline-flex; flex:none; } /* the driver symbol, filled in by auth.js (driverChip) */
.tile-net .net-chip + .net-drv { margin-left:0; }
/* on a one-column card there is no room for the address, the symbol AND the driver's name: the symbol stands for the driver (its name is in the symbol's tooltip) */
.tile-net { container-type:inline-size; }
@container (max-width: 340px) { .tile-net .net-chip + .net-drv { display:none; } }
.tile-net .drv-chip .drv-c { padding:0 5px 0 3px; } .tile-net .drv-chip .drv-sim { padding:0 4px; letter-spacing:0; }
.tile-net .net-state + .net-chip { margin-left:0; } /* no address: the driver sits beside the symbol */
.w-val { font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }
.w-val.bad { color:var(--h-d29922); }
.w-val.on { color:var(--h-3fb950); }
.pw-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; }
.pw-h { font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--h-8b949e); border-top:1px solid var(--h-21262d); padding-top:6px; margin-bottom:2px; }
.pw-row { display:flex; justify-content:space-between; gap:6px; padding:2px 0; }
.pw-row .ph { color:var(--h-8b949e); }
.pw-foot { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; border-top:1px solid var(--h-21262d); margin-top:8px; padding-top:8px; text-align:center; }
.pw-foot .lab { display:block; font-size:10px; color:var(--h-8b949e); text-transform:uppercase; letter-spacing:.05em; }
.pw-foot .w-val { font-size:14px; }

/* ── asset page (opened by clicking a widget) ── */
.fp-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:14px; }
.fp-card { background:var(--h-161b22); border:1px solid var(--h-30363d); border-radius:8px; padding:14px; min-width:0; }
.fp-card h2 { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--h-8b949e); margin-bottom:10px; display:flex; align-items:center; }
.fp-table { width:100%; border-collapse:collapse; }
.fp-table th { font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--h-8b949e); text-align:right; padding:4px 6px; position:static; background:none; border-bottom:1px solid var(--h-21262d); }
.fp-table th:first-child, .fp-table td:first-child { text-align:left; }
.fp-table td { padding:5px 6px; text-align:right; border-bottom:1px solid var(--h-21262d); }
.fp-big { font-size:clamp(22px,4vw,34px); font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1; }
.fp-big.bad { color:var(--h-d29922); } .fp-big.on { color:var(--h-3fb950); }
.fp-sub { color:var(--h-8b949e); font-size:11px; }
.bars { display:grid; gap:8px; margin-top:12px; }
.bar-row { display:grid; grid-template-columns:44px 1fr minmax(64px,auto); gap:8px; align-items:center; }
.bar-row .lab { color:var(--h-8b949e); font-size:11px; }
.bar-row .bar { height:12px; background:var(--h-0d1117); border:1px solid var(--h-30363d); border-radius:6px; overflow:hidden; }
.bar-row .bar > i { display:block; height:100%; width:calc(var(--f, 0) * 100%); background:#1f6feb; border-radius:5px; transition:width .4s; }
.bar-row .bar > i.over { background:#f85149; }
.bar-scale { display:flex; justify-content:space-between; font-size:10px; color:var(--h-8b949e); margin-left:52px; margin-right:72px; }
.two { display:flex; flex-wrap:wrap; gap:0 18px; }
.two > table { flex:1 1 130px; width:auto; }
.vbars { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:10px; }
.vbar-col { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; }
.vbar-col .lab { font-size:11px; font-weight:700; color:var(--h-c9d1d9); }
.vbar { width:100%; height:clamp(90px,16vh,150px); background:var(--h-0d1117); border:1px solid var(--h-30363d); border-radius:6px; overflow:hidden; display:flex; align-items:flex-end; }
.vbar > i { display:block; width:100%; height:calc(var(--f, 0) * 100%); background:#f0b429; transition:height .4s; }
.vbar > i.over { background:#f85149; }
.vbar-col .w-val { font-size:12px; }
.ring { position:relative; width:100%; max-width:220px; margin:0 auto; }
.ring svg { display:block; width:100%; }
.ring-mid { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding-top:4%; }
.energy { display:flex; flex-direction:column; gap:4px; margin-top:14px; padding:12px; border:1px solid var(--h-30363d); border-radius:8px; background:var(--h-0d1117); text-align:center; }
.energy .fp-big { color:var(--h-58a6ff); }
.ctl { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px; padding-top:12px; border-top:1px solid var(--h-21262d); }
.ctl input { width:120px; }
.ctl .msg { font-size:12px; flex-basis:100%; min-height:16px; }
.ctl .msg.ok { color:var(--h-3fb950); } .ctl .msg.err { color:var(--h-f85149); }
/* the full parameter list drops its tag-name column on a phone; the name and value are what matter there */
@media (max-width:600px) { #params .fp-table th:nth-child(2), #params .fp-table td:nth-child(2) { display:none; } }
/* Widgets in a row are uniform: the same height, with the connection line along the bottom of each. */
.tiles { align-items:stretch; }
.tiles > .tile { display:flex; flex-direction:column; }
.tiles > .tile > .tile-net { margin-top:auto; }
/* a wide designed card (web/parts.js TILE_SIZES) takes two columns wherever the page has two */
@media (min-width:560px) { .tiles > .tile.tile-wide { grid-column:span 2; } }

/* ── charts (web/charts.js) ── */
.cht { position:relative; min-width:0; }
.cht svg { display:block; overflow:visible; }
.cht-empty { padding:50px 16px; text-align:center; color:var(--h-8b949e); }
.cht-legend { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:8px; font-size:12px; color:var(--h-c9d1d9); }
.cht-legend span { display:inline-flex; align-items:center; gap:6px; }
.cht-legend i { width:12px; height:12px; border-radius:3px; display:inline-block; }
.cht-tip { position:fixed; z-index:900; display:none; pointer-events:none; background:rgba(22,27,34,.97); border:1px solid var(--h-30363d); border-radius:8px; padding:8px 10px; font-size:12px; color:var(--h-c9d1d9); box-shadow:0 8px 24px rgba(0,0,0,.4); max-width:320px; }
.cht-tip-title { color:var(--h-8b949e); margin-bottom:5px; }
.cht-tip-row { display:flex; align-items:center; gap:7px; margin-top:2px; white-space:nowrap; }
.cht-tip-row b { color:var(--h-e6edf3); font-variant-numeric:tabular-nums; }
.cht-key { width:12px; height:3px; border-radius:2px; flex-shrink:0; }

/* ── widget gallery (Configure page) ── */
.gal-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); gap:12px; align-items:stretch; }
/* the four default widgets sit in one row when there is room */
.gal-grid.four { grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr)); }
/* Cards in a row are uniform: same height, and each part (name, description, example, buttons) starts at the
   same level in every card. Each card lends its five rows to the row of cards (subgrid). */
.gal-card { background:var(--h-0d1117); border:1px solid var(--h-30363d); border-radius:8px; padding:12px; min-width:0; cursor:pointer; transition:border-color .12s;
  display:grid; grid-template-rows:subgrid; grid-row:span 5; row-gap:8px; align-content:start; }
.gal-card > * { min-width:0; }
.gal-card .gal-prev { align-self:start; }
@supports not (grid-template-rows:subgrid) { /* older browsers: equal heights, buttons at the bottom */
  .gal-card { display:flex; flex-direction:column; gap:8px; }
  .gal-card .gal-desc { flex:1; }
}
.gal-card:hover { border-color:var(--h-58a6ff); }
.gal-card .gal-name { font-weight:700; font-size:14px; overflow-wrap:anywhere; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.gal-card .gal-type { font-family:ui-monospace,Consolas,monospace; font-size:11px; color:var(--h-8b949e); overflow-wrap:anywhere; }
.gal-card .gal-desc { font-size:12px; color:var(--h-c9d1d9); }
.gal-card .gal-acts { display:flex; gap:8px; flex-wrap:wrap; align-items:center; align-self:end; }
.gal-card .gal-type span { display:block; } /* "used by" always on its own line, so the heading is the same height in every card */
.gal-card .gal-acts a { color:var(--h-8b949e); font-size:12px; }
.gal-card .gal-acts a:hover { color:var(--h-58a6ff); }
.gal-card .gal-acts a.btn, .gal-card .gal-acts a.btn:hover { color:var(--h-e6edf3); font-size:13px; padding:8px 14px; } .gal-card .gal-acts a.btn.primary, .gal-card .gal-acts a.btn.primary:hover { color:#fff; }
/* sections fold away; an open one scrolls inside itself so the page stays short */
details.gal-sec > summary, details.gal-maker-sec > summary { list-style:none; cursor:pointer; user-select:none; }
details.gal-sec > summary::-webkit-details-marker, details.gal-maker-sec > summary::-webkit-details-marker { display:none; }
details.gal-sec > summary h2 { margin-bottom:0; gap:8px; flex-wrap:wrap; }
details.gal-sec[open] > summary h2 { margin-bottom:10px; }
.gal-chev { display:inline-block; color:var(--h-8b949e); font-size:12px; transition:transform .12s; margin-left:2px; }
details[open] > summary .gal-chev { transform:rotate(90deg); }
.gal-n { font-size:11px; font-weight:400; color:var(--h-8b949e); text-transform:none; letter-spacing:0; white-space:nowrap; }
.gal-lead { margin-bottom:12px; }
.gal-held { margin:0 0 12px; padding:8px 12px; border:1px solid var(--h-9e6a03); border-radius:6px; background:var(--h-2d2000); color:var(--h-e3b341); font-size:13px; line-height:1.5; }
.w-fault { margin:4px 0 8px; padding:4px 8px; border-left:3px solid var(--h-d29922); background:var(--h-2d2000); color:var(--h-e3b341); font-size:12px; }
.gal-scroll { max-height:min(70vh,620px); overflow-y:auto; padding:2px 6px 2px 2px; scrollbar-color:var(--h-30363d) transparent; scrollbar-width:thin; }
details.gal-maker-sec { border:1px solid var(--h-30363d); border-radius:8px; margin-top:8px; background:var(--h-0d1117); }
details.gal-maker-sec .gal-card { background:var(--h-161b22); }
details.gal-maker-sec .gal-prev .tile { background:var(--h-0d1117); }
details.gal-maker-sec > .gal-scroll { padding:0 10px 10px; }
.gal-maker { font-size:14px; font-weight:700; color:var(--h-e6edf3); display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; min-height:52px; }
.gal-maker .grow { flex:1; }
.gal-maker-name { overflow-wrap:anywhere; }
/* logos are drawn for white paper: give them a white plate so any logo reads on the dark page */
.gal-logo { background:#fff; border-radius:6px; padding:4px 10px; display:inline-flex; align-items:center; justify-content:center; height:34px; flex-shrink:0; }
.gal-logo img { max-height:26px; max-width:130px; width:auto; height:auto; display:block; object-fit:contain; }
.gal-cap { font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--h-8b949e); }
/* a plain card with more values than it shows: the last row says how many are on the asset page, and goes there */
.tile .row.row-more { justify-content:flex-start; min-height:28px; }
.tile .row.row-more a { color:var(--h-58a6ff); font-size:12px; font-weight:600; text-decoration:none; }
.tile .row.row-more a:hover { text-decoration:underline; }
/* the example widget: the same tile the Live page draws, as a picture */
.gal-prev { min-width:0; }
.gal-prev .tile { background:var(--h-161b22); border:1px solid var(--h-30363d); border-radius:8px; padding:12px; cursor:inherit; font-size:13px; }
.gal-prev .tile .top { display:flex; align-items:flex-start; gap:6px; }
.gal-prev .tile .top .name { flex:1; font-weight:700; margin-bottom:2px; overflow-wrap:anywhere; }
.gal-prev .tile .type { display:none; } /* the card already names the type; Trend and Open mean nothing on an example */
.gal-prev .tile .top { margin-bottom:6px; }
.gal-prev .tile .row { display:flex; justify-content:space-between; gap:8px; padding:3px 0; border-top:1px solid var(--h-21262d); }
.gal-prev .tile .badge { font-size:10px; font-weight:800; padding:2px 7px; border-radius:10px; border:1px solid var(--h-3fb950); color:var(--h-3fb950); white-space:nowrap; }

/* ── dashboards (Live page) ── */
.hide { display:none !important; }
.dash-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.dash-tab { background:var(--h-161b22); color:var(--h-c9d1d9); border:1px solid var(--h-30363d); border-radius:999px; padding:6px 13px; font:inherit; font-size:12px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:7px; max-width:100%; }
.dash-tab:hover { border-color:var(--h-58a6ff); }
.dash-tab.sel { background:#1f6feb; border-color:var(--h-1f6feb); color:#fff; }
.dash-tab.add { border-style:dashed; color:var(--h-8b949e); font-weight:400; }
.dash-tab .dash-n { font-size:10px; font-weight:400; opacity:.75; font-variant-numeric:tabular-nums; }
.dash-tab .dash-ico { font-size:11px; opacity:.8; }
.dash-tools { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px; font-size:12px; min-height:28px; }
.dash-tools button:not(.info-btn), .adlg button:not(.info-btn) { background:var(--h-21262d); color:var(--h-e6edf3); border:1px solid var(--h-30363d); border-radius:6px; padding:6px 12px; font:inherit; font-size:12px; font-weight:600; cursor:pointer; }
.dash-tools button:not(.info-btn):hover:not(:disabled), .adlg button:not(.info-btn):hover:not(:disabled) { border-color:var(--h-58a6ff); }
.dash-tools button.pri:not(.info-btn), .adlg button.pri:not(.info-btn) { background:#1f6feb; border-color:var(--h-1f6feb); color:#fff; }
.dash-tools button:disabled, .adlg button:disabled { opacity:.45; cursor:default; }
.adlg button.danger:not(.info-btn) { color:var(--h-f85149); }
.dash-tools select, .dash-tools input[type=text], .adlg input[type=text] { background:var(--h-0d1117); color:var(--h-e6edf3); border:1px solid var(--h-30363d); border-radius:6px; padding:6px 9px; font:inherit; font-size:12px; min-width:0; }
.dash-tools select { max-width:100%; }
/* a visual dashboard: values placed on a picture; everything is sized from the picture's width so it fits any screen */
/* The frame has the drawing's own shape; the stage inside it grows with the zoom and slides with the pan. */
.vis { position:relative; container-type:inline-size; background:var(--h-161b22); border:1px solid var(--h-30363d); border-radius:8px; overflow:hidden; user-select:none; touch-action:none; width:100%; max-width:100%; margin:0 auto; }
.vis-stage { position:absolute; left:0; top:0; width:100%; height:100%; }
.vis-pic { position:absolute; left:0; top:0; width:100%; height:100%; display:block; }
img.vis-pic { object-fit:fill; }
.vis-detail { position:absolute; display:none; pointer-events:none; }
.vis.zoomed { cursor:grab; }
.vis-zoom { position:absolute; right:8px; top:8px; display:flex; align-items:center; gap:4px; background:rgba(13,17,23,.9); border:1px solid var(--h-30363d); border-radius:8px; padding:4px 6px; z-index:3; }
.vis-zoom button:not(.info-btn) { background:var(--h-21262d); color:var(--h-e6edf3); border:1px solid var(--h-30363d); border-radius:6px; min-width:30px; height:28px; padding:0 8px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.vis-zoom button:not(.info-btn):hover:not(:disabled) { border-color:var(--h-58a6ff); }
.vis-zoom button:disabled { opacity:.4; cursor:default; }
.vis-pct { font-size:11px; color:var(--h-8b949e); min-width:38px; text-align:right; font-variant-numeric:tabular-nums; }
.vis-note { position:absolute; left:10px; bottom:8px; font-size:11px; color:var(--h-8b949e); background:rgba(13,17,23,.85); border-radius:5px; padding:2px 7px; z-index:3; }
.vis-note:empty { display:none; }
.vis-blank { position:absolute; inset:10px; display:flex; align-items:center; justify-content:center; text-align:center; padding:20px; color:var(--h-8b949e); border:2px dashed var(--h-30363d); border-radius:8px; }
.vis.placing { cursor:crosshair; }
.mark { position:absolute; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:.45em; white-space:nowrap; text-decoration:none;
  font-size:min(calc(clamp(8.5px,1cqw,15px) * var(--vz,1)), 48px); line-height:1.2; padding:.22em .5em; border-radius:.45em; background:rgba(13,17,23,.92); border:1.5px solid var(--h-3fb950); color:var(--h-e6edf3); box-shadow:0 1px 4px rgba(0,0,0,.5); }
.mark .mark-lab { color:var(--h-8b949e); }
.mark .w-val { font-weight:700; }
.mark:hover { border-color:var(--h-58a6ff); }
.mark.badq { border-color:var(--h-d29922); }
.mark.alarm { background:#da3633; border-color:var(--h-ff7b72); color:#fff; } /* in alarm: the whole item turns red */
.mark.alarm .mark-lab, .mark.alarm .w-val { color:#fff; }
.mark.link { border-color:var(--h-58a6ff); color:var(--h-58a6ff); font-weight:600; }
.vis.editing .mark { cursor:grab; touch-action:none; }
.vis.editing .mark.sel { outline:2px solid var(--h-f0b429); outline-offset:2px; }
.vis-edit { display:flex; flex-direction:column; gap:8px; width:100%; background:var(--h-161b22); border:1px solid var(--h-30363d); border-radius:8px; padding:10px 12px; }
.ve-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ve-h { font-weight:700; color:var(--h-c9d1d9); min-width:104px; display:inline-flex; align-items:center; }
.ve-msg { color:var(--h-3fb950); } .ve-msg.bad { color:var(--h-f85149); }
/* ── The dashboard layout editor (web/dashboards.js): everything here starts with de-. The page says it is an editor, and
   from 900 px the tools stand in a column so the drawing has the width. ── */
/* the editor: the settings stand in a panel at the side, the dashboard itself is in the middle as it will look */
.de-cols { display:grid; grid-template-columns:minmax(260px, 330px) minmax(0, 1fr); gap:12px; align-items:start; }
.de-side { background:var(--h-161b22); border:1px solid var(--h-30363d); border-radius:8px; padding:12px; min-width:0; position:sticky; top:0; max-height:calc(100dvh - 190px); overflow-y:auto; }
.de-side h2 { margin-bottom:10px; }
.de-canvas { min-width:0; }
.de-canvas .tile a { pointer-events:none; } /* a widget here is a picture of the dashboard, not a way out of the editor */
.de-empty { grid-column:1 / -1; border:2px dashed var(--h-30363d); border-radius:8px; padding:40px 20px; text-align:center; color:var(--h-8b949e); line-height:1.6; }
.de-refuse { max-width:560px; margin:40px auto; text-align:center; line-height:1.6; }
.de-side .fl { display:flex; align-items:center; gap:6px; font-weight:700; color:var(--h-c9d1d9); margin:12px 0 5px; }
.de-side .fl:first-of-type { margin-top:0; }
.de-side .grow { flex:1; }
.de-side input[type=text] { width:100%; background:var(--h-0d1117); color:var(--h-e6edf3); border:1px solid var(--h-30363d); border-radius:6px; padding:7px 9px; font:inherit; }
.de-side label.kind { display:flex; gap:8px; align-items:flex-start; margin:6px 0; line-height:1.4; cursor:pointer; }
.de-side .acts { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px; }
.de-side button.danger { color:var(--h-f85149); }
.de-side .bad { color:var(--h-f85149); }
.de-side #dashRow { margin:12px 0 0; }
.de-side #dashRow:has(#dashTools:empty) { display:none; }
@media (max-width:899px) { .de-cols { grid-template-columns:minmax(0, 1fr); } .de-side { position:static; max-height:none; } }
.de-side ul.pick { max-height:240px; } .de-side #ddRest { max-height:300px; }
.de-state.saved { color:var(--h-3fb950); }
.de-bar { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; background:var(--h-12213d); border:1px solid var(--h-2f5fa8); border-left:5px solid var(--h-58a6ff); border-radius:8px; padding:8px 12px; margin-bottom:12px; font-size:13px; }
.de-tag { background:#58a6ff; color:#0d1117; font-weight:800; font-size:11px; letter-spacing:.08em; text-transform:uppercase; border-radius:4px; padding:3px 8px; }
.de-name { font-weight:700; font-size:15px; color:var(--h-e6edf3); overflow-wrap:anywhere; }
.de-what { color:var(--h-9fb4d6); }
.de-state { color:var(--h-8b949e); font-weight:600; } .de-state.dirty { color:var(--h-f2cc60); }
.de-state.dirty::before { content:"● "; }
.de-grow { flex:1; }
.de-bar button:not(.info-btn) { background:var(--h-21262d); color:var(--h-e6edf3); border:1px solid var(--h-30363d); border-radius:6px; padding:6px 12px; font:inherit; font-weight:600; cursor:pointer; white-space:nowrap; }
.de-bar button.pri:not(.info-btn) { background:#1f6feb; border-color:var(--h-1f6feb); color:#fff; }
.de-bar button:not(.info-btn):hover { border-color:var(--h-58a6ff); }
.de-bar button:not(.info-btn):disabled { opacity:.45; cursor:default; border-color:var(--h-30363d); }
.de-bar #deUndo span, .de-bar #deRedo span { font-size:17px; line-height:1; margin-right:2px; }
body.dash-editing #dashBtn, body.dash-editing #pbOpen, body.dash-editing #pbOpen + .info-btn { display:none; }
body.dash-editing .vis.editing { border-color:var(--h-2f5fa8); }
@media (min-width:900px) {
  body.dash-editing main > section:not(#deWork):not(#deRefuse) { display:grid; grid-template-columns:minmax(240px, 290px) minmax(0, 1fr); gap:0 12px; align-items:start; }
  body.dash-editing .de-bar { grid-column:1 / -1; }
  body.dash-editing #dashRow { grid-column:1; margin-bottom:0; position:sticky; top:0; min-width:0; }
  body.dash-editing #dashRow .dash-tools { width:100%; min-width:0; }
  body.dash-editing #visual { grid-column:2; min-width:0; }
  body.dash-editing .vis-edit { gap:14px; }
  body.dash-editing .vis-edit .ve-row { flex-direction:column; align-items:stretch; gap:6px; }
  body.dash-editing .vis-edit .ve-row + .ve-row { border-top:1px solid var(--h-30363d); padding-top:12px; }
  body.dash-editing .vis-edit .ve-h { min-width:0; }
  body.dash-editing .vis-edit select, body.dash-editing .vis-edit input[type=text] { width:100%; min-width:0; }
  body.dash-editing .vis-edit .ve-row:last-child { flex-direction:row; flex-wrap:wrap; align-items:center; }
}
/* dialogs on pages that have none of their own */
dialog.adlg { background:var(--h-161b22); color:var(--h-e6edf3); border:1px solid var(--h-30363d); border-radius:12px; padding:20px 22px; width:560px; max-width:calc(100vw - 32px); margin:auto; font-size:13px; }
dialog.adlg::backdrop { background:rgba(0,0,0,.65); }
dialog.adlg h2 { font-size:13px; color:var(--h-58a6ff); margin-bottom:12px; }
.adlg .fl { display:flex; align-items:center; font-size:11px; font-weight:700; color:var(--h-c9d1d9); margin:12px 0 4px; gap:4px; }
.adlg .fl .grow { flex:1; }
.adlg input[type=text] { width:100%; font-size:13px; padding:8px 10px; }
.adlg .kind { display:flex; gap:8px; align-items:flex-start; padding:7px 0; cursor:pointer; }
.adlg .kind input { margin-top:3px; accent-color:var(--h-1f6feb); }
.adlg .acts { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:16px; }
.adlg .bad { color:var(--h-f85149); font-size:12px; }
.adlg .muted { color:var(--h-8b949e); }
.adlg ul.pick, .de-side ul.pick { list-style:none; margin:0; padding:0; max-height:170px; overflow-y:auto; border:1px solid var(--h-30363d); border-radius:6px; background:var(--h-0d1117); scrollbar-width:thin; scrollbar-color:var(--h-30363d) transparent; }
.adlg ul.pick li, .de-side ul.pick li { display:flex; align-items:center; gap:6px; padding:5px 8px; border-bottom:1px solid var(--h-21262d); }
.adlg ul.pick li:last-child, .de-side ul.pick li:last-child { border-bottom:0; }
.adlg ul.pick .nm, .de-side ul.pick .nm { flex:1; min-width:0; overflow-wrap:anywhere; font-weight:600; }
.adlg ul.pick .ty, .de-side ul.pick .ty { color:var(--h-8b949e); font-size:11px; white-space:nowrap; }
.adlg ul.pick button:not(.info-btn), .de-side ul.pick button:not(.info-btn) { padding:3px 8px; font-size:11px; }
.adlg #ddFilter { margin-bottom:6px; }

/* the trend viewer inside another page (asset page): no header of its own */
html.embed .hdr, html.embed .auth-strip { display:none !important; }
.trend-frame { display:block; width:100%; height:min(72vh,600px); min-height:420px; border:1px solid var(--h-30363d); border-radius:6px; background:var(--h-0d1117); }
.trend-full { font-size:12px; font-weight:400; text-transform:none; letter-spacing:0; color:var(--h-58a6ff); text-decoration:none; white-space:nowrap; }

/* ── kick-out menus: a list that slides in over the left edge, opened by a button that is meant to be noticed ── */
.kick-btn { display:inline-flex; align-items:center; gap:8px; background:#1f6feb; color:#fff; border:1px solid var(--h-388bfd); border-radius:8px; padding:7px 13px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; max-width:100%; box-shadow:0 0 0 3px rgba(56,139,253,.18); }
.kick-btn:hover { background:#388bfd; }
.kick-btn.on { background:var(--h-0d419d); }
.kick-btn .kick-ico { font-size:15px; line-height:1; }
.kick-btn .kick-now { font-weight:400; opacity:.9; overflow:hidden; text-overflow:ellipsis; }
.kick-btn .kick-arrow { font-size:11px; opacity:.85; transition:transform .16s; }
.kick-btn.on .kick-arrow { transform:rotate(180deg); }
.kick-drawer { position:fixed; left:0; top:56px; bottom:34px; width:min(330px,94vw); z-index:20; margin:0; display:flex; flex-direction:column; background:var(--h-161b22); border:1px solid var(--h-388bfd); border-left:0; border-radius:0 10px 10px 0; padding:14px; box-shadow:8px 0 28px rgba(0,0,0,.55);
  transform:translateX(-105%); visibility:hidden; transition:transform .16s ease, visibility 0s linear .16s; }
.kick-drawer.open { transform:none; visibility:visible; transition:transform .16s ease; }
.kick-drawer h2 { display:flex; align-items:center; }
.kick-drawer h2 .grow { flex:1; }
.kick-drawer .kick-close { background:none; border:1px solid var(--h-30363d); color:var(--h-c9d1d9); border-radius:5px; width:24px; height:24px; padding:0; cursor:pointer; font-size:12px; line-height:1; }
.kick-drawer .kick-close:hover { border-color:var(--h-58a6ff); }
.kick-drawer .kick-body { flex:1; min-height:0; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--h-30363d) transparent; }
.kick-drawer .dash-tabs { flex-direction:column; flex-wrap:nowrap; gap:4px; margin:0; }
.kick-drawer .dash-tab { border-radius:6px; width:100%; justify-content:flex-start; padding:8px 11px; }
.kick-drawer .dash-tab .dash-n { margin-left:auto; }
/* groups of dashboards (0.76.0): a group's dashboards sit indented under it in the list */
.kick-drawer .dash-tab.dash-group { font-weight:800; }
.kick-drawer .dash-tab.dash-child { margin-left:22px; width:calc(100% - 22px); }
/* a group's page: one folding section per dashboard inside it, its sites as coloured marks in the heading */
.dgr-tools { display:inline-flex; align-items:center; gap:8px; margin:0; }
.dgr-tools button:not(.info-btn), button.dgr-up { background:var(--h-21262d); color:var(--h-e6edf3); border:1px solid var(--h-30363d); border-radius:6px; padding:6px 12px; font:inherit; font-weight:600; cursor:pointer; }
.dgr-tools button:not(.info-btn):hover, button.dgr-up:hover { border-color:var(--h-58a6ff); }
button.dgr-up { color:var(--h-58a6ff); font-weight:700; }
.dgr-page { display:block !important; }
details.dgr-sec { background:var(--h-161b22); border:1px solid var(--h-30363d); border-radius:8px; margin:0 0 10px; }
details.dgr-sec > summary { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:12px 14px; cursor:pointer; }
details.dgr-sec > summary:hover { background:color-mix(in srgb, var(--h-58a6ff) 6%, transparent); }
.dgr-name { font-size:18px; font-weight:800; color:var(--h-e6edf3); }
.dgr-count { font-size:13px; color:var(--h-8b949e); }
.dgr-sum b { font-size:12px; font-weight:800; padding:2px 9px; border-radius:10px; border:1px solid; margin-right:6px; }
.dgr-sum .dgr-ok { color:var(--h-3fb950); } .dgr-sum .dgr-alarm { color:var(--h-f85149); } .dgr-sum .dgr-comm { color:var(--h-f85149); border-style:dashed; }
.dgr-chips { display:flex; flex-wrap:wrap; gap:6px; flex-basis:100%; order:9; }
a.dgr-st { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border:1px solid var(--h-30363d); border-radius:14px; color:var(--h-c9d1d9); text-decoration:none; font-size:13px; font-weight:600; background:var(--h-0d1117); }
a.dgr-st:hover { border-color:var(--h-58a6ff); }
.dgr-dot { width:11px; height:11px; border-radius:50%; background:var(--h-8b949e); flex:none; }
a.dgr-st.ok .dgr-dot { background:var(--h-3fb950); }
a.dgr-st.alarm { border-color:var(--h-f85149); } a.dgr-st.alarm .dgr-dot { background:var(--h-f85149); }
a.dgr-st.comm { border-color:var(--h-f85149); border-style:dashed; color:var(--h-f85149); } a.dgr-st.comm .dgr-dot { background:transparent; border:2px solid var(--h-f85149); }
a.dgr-st.off .dgr-dot { background:var(--h-484f58); }
a.dgr-open { color:var(--h-58a6ff); font-weight:700; text-decoration:none; border:1px solid var(--h-30363d); border-radius:6px; padding:4px 10px; }
a.dgr-open:hover { border-color:var(--h-58a6ff); }
details.dgr-sec > .dgr-tiles, details.dgr-sec > .muted { padding:0 14px 14px; }
.kick-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:12px; }
.kick-row .dash-tools { margin-bottom:0; }

/* ── the way back (to Live from an asset, to Energy from Billing, and so on): one look everywhere, meant to be seen ──
   The lettering is a heavy slanted condensed face to go with the Argos logo. Only fonts already on the computer are used
   (Bahnschrift on Windows, then the nearest thing elsewhere), so nothing is fetched from the internet. */
.live-back { display:inline-flex; align-items:center; gap:10px; background:linear-gradient(180deg,#f0463f,#c62b28); color:#fff; text-decoration:none; border-radius:10px; padding:6px 18px 6px 6px; flex-shrink:0; border:1px solid var(--h-ff7b72); box-shadow:0 0 0 3px rgba(218,54,51,.25), 0 3px 10px rgba(0,0,0,.45); transition:transform .12s, box-shadow .12s; }
.live-back:hover { background:linear-gradient(180deg,#ff5a52,#da3633); transform:translateX(-2px); box-shadow:0 0 0 4px rgba(248,81,73,.35), 0 3px 12px rgba(0,0,0,.5); }
.live-back:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.live-back .lb-arrow { width:34px; height:34px; border-radius:50%; background:#fff; color:#0d1117; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.live-back .lb-arrow svg { width:21px; height:21px; display:block; margin-right:2px; }
.live-back .lb-text { display:flex; flex-direction:column; line-height:1; font-family:"Bahnschrift","DIN Alternate","Arial Narrow","Roboto Condensed","Segoe UI",sans-serif; font-stretch:condensed; font-style:italic; text-transform:uppercase; white-space:nowrap; }
.live-back .lb-text i { font-size:10px; font-weight:700; letter-spacing:.22em; opacity:.92; }
.live-back .lb-text b { font-size:21px; font-weight:800; letter-spacing:.05em; text-shadow:0 1px 0 rgba(0,0,0,.35); margin-top:2px; }
/* a tight Back for a page whose content wants the room (the asset page, 0.75.2) */
.live-back.lb-tight { padding:3px 14px 3px 4px; gap:8px; }
.live-back.lb-tight .lb-arrow { width:28px; height:28px; } .live-back.lb-tight .lb-arrow svg { width:17px; height:17px; }
.live-back.lb-tight .lb-text b { font-size:17px; margin-top:1px; } .live-back.lb-tight .lb-text i { font-size:9px; }
.back-row { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:12px; }
.back-row .lead { margin:0; flex:1; min-width:200px; }

/* the two buttons that change a dashboard: each its own shade, so they are not mistaken for one another */
.dash-tools button#dashSettings { background:var(--h-172b4d); border-color:var(--h-2f5fa8); color:var(--h-cfe1ff); }
.dash-tools button#dashSettings:hover:not(:disabled) { border-color:var(--h-79b8ff); }
.dash-tools button#dashEdit { background:var(--h-3b2a0a); border-color:var(--h-9e6a03); color:var(--h-f2cc60); }
.dash-tools button#dashEdit:hover:not(:disabled) { border-color:var(--h-f2cc60); }

/* the scadaBOSS cloud: marks anything that sends this site's data to the ScadaBOSS cloud */
.sb-cloud { display:inline-flex; flex-shrink:0; filter:drop-shadow(0 0 8px rgba(56,139,253,.45)); }
.sb-cloud svg { width:150px; height:74px; display:block; }
/* the way to the alarm notification set-up: a button, not a link in passing */
/* shelved alarms (web/shelve.js): the list, the dialog and the count beside the Notifications button */
.sh-box { max-height:min(46vh,420px); overflow:auto; border:1px solid var(--h-30363d); border-radius:8px; }
.sh-table { width:100%; border-collapse:collapse; font-size:14px; } .sh-table th { text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--h-c9d1d9); padding:8px 10px; border-bottom:1px solid var(--h-30363d); position:sticky; top:0; background:var(--h-161b22); }
.sh-table td { padding:9px 10px; border-bottom:1px solid var(--h-21262d); vertical-align:top; color:var(--h-e6edf3); } .sh-table tr:last-child td { border-bottom:0; }
.sh-kind { display:inline-block; margin-left:6px; padding:1px 8px; border-radius:10px; border:1px solid var(--h-d29922); color:var(--h-e3b341); font-size:12px; font-weight:700; white-space:nowrap; }
.sh-sub { font-size:12px; color:var(--h-c9d1d9); } .sh-act { text-align:right; white-space:nowrap; }
.sh-empty { padding:14px; color:var(--h-c9d1d9); font-size:14px; border:1px dashed var(--h-30363d); border-radius:8px; }
.sh-dlg select, .sh-dlg input[type=text] { width:100%; font-size:15px; } .sh-dlg label.f { display:block; margin-top:12px; } .sh-lead { color:var(--h-c9d1d9); font-size:14px; margin:0 0 6px; }
.sh-many { border:1px solid var(--h-30363d); border-radius:8px; padding:8px 10px; color:var(--h-e6edf3); font-size:14px; } .sh-many-list { max-height:150px; overflow:auto; margin-top:6px; } .sh-many-list > div { padding:3px 0; }
.sh-filter select { flex:1 1 170px; min-width:0; max-width:260px; height:34px; font-size:14px; padding:0 8px; border:1px solid var(--h-30363d); border-radius:6px; background:var(--h-0d1117); color:var(--h-e6edf3); }
.sh-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:8px; } .sh-grow { flex:1; }
input.sh-find { flex:1 1 260px; min-width:0; max-width:420px; height:34px; font-size:14px; padding:0 10px; border:1px solid var(--h-30363d); border-radius:6px; background:var(--h-0d1117); color:var(--h-e6edf3); }
.sh-only { display:inline-flex; align-items:center; gap:7px; font-size:14px; color:var(--h-e6edf3); white-space:nowrap; cursor:pointer; } .sh-only input, .sh-pick input[type=checkbox] { width:18px; height:18px; }
.sh-pickbox { max-height:min(52vh,520px); } .sh-pick th { position:sticky; top:0; background:var(--h-161b22); z-index:1; } .sh-pick td { vertical-align:middle; } .sh-pick tr.sh-off td { opacity:.6; }
.sh-pick .sh-kind { margin-left:0; border-color:var(--h-30363d); background:var(--h-21262d); color:var(--h-e6edf3); font-weight:600; border-radius:6px; } /* a configured alarm is not an alarm: no alarm colour here. Yellow is SHELVED and red is ACTIVE NOW, in the Now column only */ .sh-more { padding:10px; color:var(--h-c9d1d9); font-size:13px; text-align:center; }
.sh-state { display:inline-block; padding:2px 9px; border-radius:9px; font-size:11px; font-weight:800; white-space:nowrap; } .sh-state.shelved { border:1.5px solid var(--h-d29922); color:var(--h-e3b341); } .sh-state.active { background:var(--h-f85149); color:#fff; }
/* asset records from a widget: the Records link in a card's heading line; filled once the asset has records */
.tile .type { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
a.tile-rec { display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px; margin-left:auto; border:1.5px solid var(--h-388bfd); border-radius:6px; color:var(--h-58a6ff); font-size:12px; font-weight:700; text-decoration:none; white-space:nowrap; }
a.tile-rec svg { width:14px; height:14px; } a.tile-rec:hover { background:rgba(56,139,253,.16); }
a.tile-rec.has { background:#1f6feb; border-color:var(--h-388bfd); color:#fff; } a.tile-rec .tile-rec-n { background:#fff; color:#0d1117; border-radius:8px; padding:0 6px; font-size:11px; } a.tile-rec .tile-rec-n[hidden] { display:none; }
html.sh-on a.tile-rec + .tile-sh { margin-left:0; }
.gal-prev a.tile-rec { display:none; }
/* shelving from a widget: the Shelve button and the "N shelved" mark in a card's heading line - only where web/shelve.js is loaded */
.tile-sh { display:none; } html.sh-on .tile .type { display:flex; align-items:center; gap:5px; flex-wrap:wrap; } html.sh-on .tile-sh { display:inline-flex; align-items:center; gap:6px; margin-left:auto; }
.tile-shelve { display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px; border:1.5px solid var(--h-d29922); border-radius:6px; background:transparent; color:var(--h-e3b341); font:inherit; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; }
.tile-shelve svg { width:14px; height:14px; } .tile-shelve:hover:not(:disabled) { background:var(--h-2d2000); }
.tile-shelf { padding:2px 8px; border-radius:9px; background:var(--h-d29922); color:#0d1117; font-size:11px; font-weight:800; white-space:nowrap; } .tile-shelf[hidden] { display:none; }
@media (max-width:700px) { .sh-table thead { display:none; } .sh-table tr { display:block; padding:6px 0; border-bottom:1px solid var(--h-30363d); } .sh-table td { display:block; border:0; padding:3px 10px; } .sh-act { text-align:left; } }
.notify-btn { display:inline-flex; align-items:center; gap:8px; margin-left:auto; background:#1f6feb; color:#fff; border:1px solid var(--h-388bfd); border-radius:8px; padding:7px 14px; font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap; box-shadow:0 0 0 3px rgba(56,139,253,.18); }
.notify-btn:hover { background:#388bfd; }
/* The Alarms section's menu: Active, History, Shelved, Configure alarms - the same row on every page of the section (auth.js alarmTabs) */
/* a link or button that goes to a page carries that page's icon (auth.js goIcon) */
.has-ico { display:inline-flex !important; align-items:center; gap:6px; }
.hdr-ico.go-ico { width:17px; height:17px; }
.sec-tabs a.active .go-ico, .mt-btn.go .go-ico, button.pri .go-ico { color:#fff; }
button.al-mt .go-ico { width:14px; height:14px; } button.al-mt:hover:not(:disabled) .go-ico { color:#fff; }
/* a section's tabs, put under the header by auth.js on the pages that have not placed them themselves */
.sec-row { display:flex; align-items:center; gap:8px; padding:8px 14px 0; flex-shrink:0; } .sec-row:has(.fa-back) { flex-wrap:wrap; } @media print { .sec-row { display:none !important; } }
.sec-tabs { display:inline-flex; flex-wrap:wrap; border:1.5px solid var(--h-30363d); border-radius:8px; overflow:hidden; flex:0 1 auto; min-width:0; max-width:100%; }
.sec-tabs a { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 15px; background:var(--h-21262d); color:var(--h-c9d1d9); font-size:13px; font-weight:800; text-decoration:none; white-space:nowrap; border-right:1px solid var(--h-30363d); }
@media (max-width:520px) { .sec-tabs a { padding:0 10px; flex:1 1 auto; justify-content:center; border-bottom:1px solid var(--h-30363d); } }
.sec-tabs a:last-child { border-right:0; } .sec-tabs a:hover { color:var(--h-58a6ff); }
.sec-tabs a.active { background:#1f6feb; color:#fff; }
.sec-tabs .n { font-size:11px; padding:1px 7px; border-radius:9px; background:var(--h-2d333b); color:var(--h-c9d1d9); }
.sec-tabs a.active .n { background:rgba(255,255,255,.22); color:#fff; } .sec-tabs .n.hot { background:var(--h-f85149); color:#fff; } .sec-tabs .n.warm { background:var(--h-d29922); color:#0d1117; }
.notify-btn svg { width:19px; height:19px; display:block; }

/* ── the Argos mark in the header of every page, with its 2.0 ── */
.hdr .hdr-title { display:flex; align-items:center; gap:12px; min-width:0; }
.hdr-brand { display:inline-flex; align-items:center; gap:7px; text-decoration:none; flex-shrink:0; padding:0 !important; background:none !important; }
.hdr-brand img { height:22px; width:auto; display:block; }
.hdr-two { font-size:19px; font-weight:900; font-style:italic; letter-spacing:-.02em; line-height:1; transform:skewX(-8deg); padding:1px 7px 2px 5px; border-radius:5px;
  background:linear-gradient(135deg,#79c0ff 0%,#1f6feb 55%,#a371f7 100%); color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.35); box-shadow:0 0 0 1px rgba(121,192,255,.55), 0 0 12px rgba(56,139,253,.55); }
.hdr-page { font-weight:600; color:var(--h-c9d1d9); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-left:12px; border-left:1px solid var(--h-30363d); }
/* Every section has its own icon and colour (owner, 2026-10-09: "add the icons to all the sections - make the colors
   different for them - icons make it look more polished as a true product"). The icons and colours are the NAV list in
   auth.js; --sec is the section's colour. The page's title is a tag in that colour; a link carries the icon. */
.hdr-page.hdr-tool { display:inline-flex; align-items:center; gap:7px; margin-left:10px; padding:3px 12px 3px 9px; border:1.5px solid var(--sec, var(--h-30363d)); border-radius:7px; background:color-mix(in srgb, var(--sec, transparent) 16%, transparent); color:var(--sec, var(--h-c9d1d9)); font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
/* The tag is a flex item of the title: it gives way only when the title itself has run out of room. (It used to be capped at
   the title's width less 250px, which cut a few pixels off "Alarms" or "Reports" at some widths: found 0.31.0.) */
.hdr-page.hdr-tool { flex:0 1 auto; min-width:0; vertical-align:middle; overflow:hidden; box-sizing:border-box; }
.hdr-page-t { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:600px) { .hdr-page.hdr-tool { letter-spacing:0; text-transform:none; padding:2px 8px 2px 6px; margin-left:6px; gap:5px; } }
.hdr-ico { width:20px; height:20px; flex:none; color:var(--sec, currentColor); fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.hdr-ico.solid { fill:currentColor; stroke:none; }
.hdr-page.hdr-tool .hdr-ico { width:20px; height:20px; }
.hdr a.hdr-sec { display:inline-flex; align-items:center; gap:5px; }
@media (max-width:1500px) { .hdr { column-gap:11px !important; } .hdr a { font-size:14px !important; } .hdr .hdr-ico { width:18px; height:18px; } .hdr-page.hdr-tool { letter-spacing:.02em; padding:3px 9px 3px 7px; margin-left:6px; } .hdr-page.hdr-tool .hdr-ico { width:18px; height:18px; } }
@media (max-width:600px) { .hdr { column-gap:8px !important; } .hdr a { font-size:13px !important; padding:3px 0; } .hdr .hdr-ico { width:15px; height:15px; } .hdr a.hdr-sec { gap:3px; } } /* a phone: a little larger than before, and still four rows */
.hdr a.hdr-sec:not(.here) .hdr-ico { opacity:.85; }
.hdr a.hdr-sec:hover .hdr-ico, .hdr a.hdr-sec.here .hdr-ico { opacity:1; }
@media (max-width:520px) { .hdr-brand img { height:18px; } .hdr-two { font-size:15px; } }

/* ── pump station widget and page (legacy GST types) ── */
.gone { display:none !important; }
.st-top { display:flex; gap:12px; justify-content:space-between; border-top:1px solid var(--h-21262d); padding-top:8px; }
.st-big { display:flex; flex-direction:column; align-items:center; flex:1 1 0; min-width:0; max-width:150px; }
.st-big .lab { font-size:12px; color:var(--h-c9d1d9); white-space:nowrap; }
.st-box { display:block; width:100%; box-sizing:border-box; text-align:center; background:var(--h-0d1117); border:2px solid var(--h-58a6ff); border-radius:3px; padding:2px 6px; }
.st-box .w-val { font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
.st-men { display:flex; flex-wrap:nowrap; justify-content:space-between; gap:0 8px; margin-top:8px; min-height:24px; overflow:hidden; } /* wells left, boosters right, ONE line even with three wells and four boosters (owner, 2026-10-15: "they should be on one line") */
.st-men-g { display:flex; flex-wrap:nowrap; gap:0 4px; align-items:center; min-width:0; }
.st-man { display:inline-flex; align-items:center; gap:1px; font-size:11px; white-space:nowrap; }
.st-man b { font-weight:800; letter-spacing:-.02em; }
.st-man img { width:13px; height:18px; object-fit:contain; }
.st-man .t-on { display:none; } .st-man.run .t-on { display:block; } .st-man.run .t-off { display:none; }
.st-man.fault b { color:var(--h-ff7b72); }
.st-tr { position:relative; height:74px; margin-top:8px; background:var(--h-0d1117); border:1px solid var(--h-30363d); border-radius:4px; overflow:hidden; }
.st-tr .spark { position:absolute; inset:16px 0 2px 0; height:auto; display:block; }
.st-tr .spark svg { width:100%; height:100%; }
.st-tr .spark-hl { display:none; }
.st-tr-p svg path { stroke:var(--h-f85149); } .st-tr svg path[stroke="none"] { display:none; } /* two lines on one chart: the high-low bands would hide each other */
.st-tr-t svg path { stroke:var(--h-79b8ff); }
.st-tr-k { position:absolute; top:2px; font-style:normal; font-size:9px; font-weight:800; line-height:1; padding:2px 5px; border-radius:2px; color:#0d1117; }
.st-tr-k-p { left:2px; background:#f85149; color:#fff; } .st-tr-k-t { left:58px; background:#79b8ff; }
.st-pwr { display:flex; align-items:center; gap:10px; margin-top:8px; min-height:22px; }
.st-pwr span { position:relative; display:inline-block; height:22px; }
.st-pwr-ats { width:126px; } .st-pwr-gen { width:31px; }
.st-pwr img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.st-pwr .t-on { display:none; } .st-pwr .on .t-on { display:block; } .st-pwr .on .t-off { display:none; }
.st-tank { width:34px; min-height:74px; border:2px solid var(--h-6e7681); border-top-width:3px; border-radius:4px 4px 6px 6px; background:var(--h-0d1117); position:relative; overflow:hidden; flex-shrink:0; }
.st-tank i, .st-bigtank i { position:absolute; left:0; right:0; bottom:0; height:calc(var(--f,0)*100%); background:linear-gradient(180deg,#58a6ff,#1f6feb); transition:height .5s; }
.st-tank i.over, .st-bigtank i.over { background:#da3633; }
.st-lamps { display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; padding-top:8px; border-top:1px solid var(--h-21262d); }
.st-lamp { font-size:10px; font-weight:800; letter-spacing:.04em; padding:3px 7px; border-radius:10px; border:1px solid var(--h-30363d); color:var(--h-8b949e); background:var(--h-0d1117); white-space:nowrap; }
.st-lamp.run { border-color:var(--h-3fb950); color:#0d1117; background:#3fb950; }
.st-lamp.warn { border-color:var(--h-d29922); color:#0d1117; background:#d29922; }
.st-lamp.fault { border-color:var(--h-f85149); color:#fff; background:#da3633; }
.st-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); }
.st-grid .st-group { grid-column:1/-1; }
.st-group:not(:has(.st-eq:not(.gone))) { display:none; } /* a group with nothing installed is not shown */
.st-eqs { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr)); gap:12px; align-items:start; }
.st-eq { border:1px solid var(--h-21262d); border-radius:8px; padding:10px; background:var(--h-0d1117); min-width:0; }
.st-eq-h { font-weight:700; margin-bottom:6px; }
.st-glyph { width:64px; height:64px; margin:2px auto 8px; color:var(--h-6e7681); transition:color .2s; }
.st-glyph svg { width:100%; height:100%; display:block; }
.st-glyph { position:relative; } /* the legacy pictures, as .g-sym: grey stopped, green running, red fault */
.st-glyph img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.st-glyph .s-run, .st-glyph .s-fault { display:none; }
.st-glyph.run .s-off { display:none; } .st-glyph.run .s-run { display:block; }
.st-glyph.fault .s-off, .st-glyph.fault .s-run { display:none; } .st-glyph.fault .s-fault { display:block; }
.st-glyph.run { color:var(--h-3fb950); }
.st-glyph.fault { color:var(--h-f85149); }
.st-pills { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; margin-bottom:8px; }
.st-pill { font-size:10px; letter-spacing:.05em; padding:2px 7px; border-radius:10px; border:1px solid var(--h-30363d); color:var(--h-8b949e); white-space:nowrap; }
.st-pill b { font-weight:800; }
.st-pill .t-on { display:none; } .st-pill.on .t-on { display:inline; } .st-pill.on .t-off { display:none; }
.st-pill.run.on { border-color:var(--h-3fb950); color:var(--h-3fb950); }
.st-pill.mode.on, .st-pill.call.on { border-color:var(--h-58a6ff); color:var(--h-58a6ff); }
.st-pill.mode:not(.on) { border-color:var(--h-d29922); color:var(--h-d29922); }
.st-pill.fault { display:none; } .st-pill.fault.on { display:inline; border-color:var(--h-f85149); background:#da3633; color:#fff; }
.st-kv { display:flex; justify-content:space-between; gap:8px; padding:4px 0; border-top:1px solid var(--h-21262d); }
.st-kv > span:first-child { color:var(--h-8b949e); min-width:0; }
.st-kv .w-val { font-variant-numeric:tabular-nums; white-space:nowrap; }
.st-cmd { margin-top:8px; border:1px solid var(--h-2f5fa8); border-radius:6px; background:var(--h-111a2b); }
.st-cmd > summary { cursor:pointer; padding:6px 10px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--h-cfe1ff); }
.st-cmd > summary .n { font-weight:600; color:var(--h-8b949e); margin-left:4px; }
.st-cmd-row { padding:8px 10px; border-top:1px solid var(--h-21262d); }
.st-cmd-lab { display:block; font-size:12px; color:var(--h-8b949e); margin-bottom:4px; overflow-wrap:anywhere; }
.st-tankrow { display:flex; gap:18px; align-items:stretch; }
.st-bigtank { width:96px; min-height:220px; flex-shrink:0; border:3px solid var(--h-6e7681); border-radius:6px 6px 10px 10px; background:var(--h-0d1117); position:relative; margin-right:58px; }
.st-bigtank i { border-radius:0 0 6px 6px; }
.st-mark { position:absolute; left:-4px; right:-10px; bottom:calc(var(--m,0)*100%); border-top:2px dashed var(--h-f0b429); height:0; }
.st-mark em { position:absolute; left:calc(100% + 4px); top:-8px; font-style:normal; font-size:10px; font-weight:700; color:var(--h-f0b429); white-space:nowrap; }
.st-tankside { flex:1; min-width:0; }
@media (max-width:480px) { .st-bigtank { width:64px; min-height:180px; } }
.st-ats .t-on { display:none; } .st-ats.warn .t-on { display:inline; } .st-ats.warn .t-off { display:none; }
.st-ats:not(.warn) { border-color:var(--h-3fb950); color:var(--h-3fb950); }
.st-v .spark { flex:1; min-width:0; max-width:90px; margin-left:auto; }
.st-cmd select { min-width:130px; }
.st-pill.local.on { border-color:var(--h-d29922); color:var(--h-d29922); } .st-pill.local:not(.on) { border-color:var(--h-58a6ff); color:var(--h-58a6ff); }

/* ── the legacy GSTm faceplate: a fixed 1900 x 1070 canvas scaled to fit one view (web/widgets.js stationCanvas) ── */
.gst-fit { position:relative; width:100%; overflow:hidden; background:var(--h-161b22); border:1px solid var(--h-30363d); border-radius:8px; }
.gst { position:absolute; top:0; left:0; width:1900px; height:1070px; transform-origin:0 0; font-size:22px; color:var(--h-e6edf3); }
/* a group (.g-grp) and a valve's position words (.g-pos, shown while the valve is modulating) are 0 x 0 boxes at the canvas's corner:
   what is inside them is placed on the canvas's own coordinates. Before 0.73.0 .g-pos was missing here and its boxes fell into the
   page's flow, piled up at the top left of the canvas. */
.gst > *, .g-grp > *, .g-pos > * { position:absolute; }
.g-grp, .g-pos { left:0; top:0; width:0; height:0; }
.g-bar { background:var(--h-2b3d52); border-radius:4px; display:flex; align-items:center; justify-content:center; }
.g-title { font-size:36px; font-weight:700; letter-spacing:.02em; }
.g-lab { transform:translate(-50%,-50%); white-space:nowrap; text-align:center; line-height:1.1; font-size:21px; color:var(--h-c9d1d9); }
.g-lab.b { font-weight:800; color:var(--h-e6edf3); }
.g-lab.xl { font-size:34px; color:var(--h-e6edf3); }
.g-val { display:flex; align-items:center; justify-content:center; gap:4px; background:var(--h-0d1117); border:2px solid var(--h-58a6ff); border-radius:3px; font-weight:800; font-size:24px; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; color:var(--h-e6edf3); padding:0 4px; box-sizing:border-box; }
.g-val.sm { font-size:20px; } .g-val.big { font-size:30px; }
.g-val .chip { font-size:12px; margin-left:2px; }
button.g-in { font:inherit; font-weight:800; font-size:23px; background:var(--h-12233d); border:2px solid var(--h-79b8ff); color:var(--h-cfe1ff); cursor:pointer; min-height:0; }
button.g-in:hover:not(:disabled) { background:#1f6feb; color:#fff; }
button.g-in:disabled { cursor:default; opacity:1; background:var(--h-0d1117); border-color:var(--h-30363d); color:var(--h-e6edf3); }
select.g-sel { font:inherit; font-size:19px; font-weight:600; padding:0 4px; min-height:0; height:auto; background:var(--h-21262d); color:var(--h-e6edf3); border:1px solid var(--h-6e7681); border-radius:3px; box-sizing:border-box; }
select.g-sel:disabled { opacity:1; color:var(--h-c9d1d9); }
.g-sym img, .g-two img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.g-sym .s-run, .g-sym .s-fault { display:none; }
.g-sym.run .s-off { display:none; } .g-sym.run .s-run { display:block; }
.g-sym.fault .s-off, .g-sym.fault .s-run { display:none; } .g-sym.fault .s-fault { display:block; }
/* the polling mark (0.64.0): on every card beside the badge, and in the station page's title bar */
.poll-mark { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; flex:none; border-radius:50%; color:var(--h-8b949e); vertical-align:middle; }
.poll-mark svg { width:20px; height:20px; }
.poll-mark.poll-ok { color:var(--h-3fb950); } .poll-mark.poll-warn { color:var(--h-d29922); } .poll-mark.poll-bad { color:var(--h-f85149); } .poll-mark.poll-off { color:var(--h-8b949e); opacity:.7; }
.poll-mark.poll-bad svg { animation:poll-blink 1.6s steps(2) infinite; }
.poll-mark.poll-beat svg { animation:poll-turn .8s ease-out; }
@keyframes poll-turn { from { transform:rotate(0); } to { transform:rotate(180deg); } }
@keyframes poll-blink { 50% { opacity:.3; } }
@media (prefers-reduced-motion: reduce) { .poll-mark.poll-beat svg, .poll-mark.poll-bad svg { animation:none; } }
.g-bar .poll-mark { width:46px; height:46px; margin-right:12px; } .g-bar .poll-mark svg { width:38px; height:38px; }
.g-ht { display:flex; align-items:center; gap:9px; padding:0 10px; border-radius:4px; background:var(--h-0d1117); border:2px solid var(--h-f85149); font-size:24px; white-space:nowrap; overflow:hidden; color:var(--h-e6edf3); }
.g-ht.on { border-color:var(--h-3fb950); }
.g-ht-dot { flex:none; width:18px; height:18px; border-radius:50%; background:var(--h-f85149); }
.g-ht.on .g-ht-dot { background:var(--h-3fb950); animation:g-ht-beat 2s ease-in-out infinite; }
@keyframes g-ht-beat { 50% { opacity:.35; } }
@media (prefers-reduced-motion: reduce) { .g-ht.on .g-ht-dot { animation:none; } }
.g-ht-ok { display:none; color:var(--h-3fb950); font-weight:700; } .g-ht.on .g-ht-ok { display:inline; } .g-ht.on .g-ht-no { display:none; }
.g-ht-no { color:var(--h-f85149); font-weight:800; }
.g-ht-q { display:none; color:var(--h-d29922); font-weight:700; } .g-ht.on-nodata { border-color:var(--h-d29922); } .g-ht.on-nodata .g-ht-dot { background:var(--h-8b949e); }
.g-ht.on-nodata .g-ht-q { display:inline; } .g-ht.on-nodata .g-ht-n { display:none; } .g-ht.on-nodata .g-ht-no, .g-ht.on-nodata .g-ht-ok { display:none; } .g-ht-n { color:var(--h-c9d1d9); } .g-ht-n .w-val { font-weight:700; color:var(--h-e6edf3); }
.g-ht.g-ht-plc { border-color:var(--h-30363d); } /* GSTo: the PLC's own line - state is the polling mark's, not this box's */
.g-wname { display:inline-block; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom; } /* a well's own name (0.74.1) */
/* remote well field link (0.74.0): the antenna and its box of figures */
.g-ant { position:absolute; display:flex; align-items:center; justify-content:center; padding:0; border:2px solid currentColor; border-radius:6px; background:var(--h-0d1117); color:var(--h-f85149); cursor:pointer; z-index:3; }
.g-ant svg { width:80%; height:80%; }
.g-ant.conn { color:var(--h-d29922); } .g-ant.ok { color:var(--h-3fb950); }
.g-ant.ok-nodata { color:var(--h-8b949e); }
.g-ant:not(.ok):not(.ok-nodata) { animation:g-ant-pulse 1.4s ease-in-out infinite; }
@keyframes g-ant-pulse { 50% { box-shadow:0 0 0 6px color-mix(in srgb, var(--h-f85149) 35%, transparent); } }
@media (prefers-reduced-motion: reduce) { .g-ant:not(.ok) { animation:none; } }
.g-rwdiag { position:absolute; z-index:6; min-width:340px; padding:10px 14px 12px; background:var(--h-161b22); border:2px solid var(--h-58a6ff); border-radius:8px; box-shadow:0 8px 24px color-mix(in srgb, var(--h-010409) 60%, transparent); font-size:19px; color:var(--h-e6edf3); }
.g-rwdiag[hidden] { display:none; }
.g-rwdiag-h { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:20px; }
.g-rwdiag-x { min-width:34px; min-height:34px; font-size:24px; line-height:1; border:2px solid var(--h-30363d); border-radius:6px; background:var(--h-21262d); color:var(--h-e6edf3); cursor:pointer; }
.g-rwdiag-st { margin:8px 0; font-weight:800; }
.g-rwdiag-st span { display:none; } .g-rwdiag:not(.ok):not(.conn) .g-rwdiag-dn { display:inline; color:var(--h-f85149); }
.g-rwdiag.conn:not(.ok) .g-rwdiag-cn { display:inline; color:var(--h-d29922); } .g-rwdiag.ok .g-rwdiag-ok { display:inline; color:var(--h-3fb950); }
.g-rwdiag.ok-nodata .g-rwdiag-st span { display:none; }
.g-rwdiag table { border-collapse:collapse; width:100%; }
.g-rwdiag table, .g-rwdiag tr { background:none; }
.g-rwdiag th, .g-rwdiag td { font-size:19px; text-transform:none; letter-spacing:0; background:none; border:0; border-bottom:1px solid var(--h-30363d); }
.g-rwdiag th { text-align:left; font-weight:400; color:var(--h-c9d1d9); padding:4px 18px 4px 0; white-space:nowrap; }
.g-rwdiag td { text-align:right; font-weight:800; font-variant-numeric:tabular-nums; color:var(--h-e6edf3); padding:4px 0; }
.g-rwdiag-n { margin:8px 0 0; font-size:15px; color:var(--h-c9d1d9); max-width:340px; }
.g-two .t-on { display:none; } .g-two.on .t-on { display:block; } .g-two.on .t-off { display:none; }
.g-tank { background:var(--h-010409); border:3px solid var(--h-8b949e); box-sizing:border-box; overflow:visible; }
.g-tank i { position:absolute; left:0; right:0; bottom:0; height:calc(var(--f,0)*100%); background:linear-gradient(180deg,#58a6ff,#1f6feb); transition:height .5s; }
.g-tank i.over { background:#da3633; }
.g-tank .st-mark { left:-8px; right:-8px; }
.g-trend { background:var(--h-0d1117); border:1px solid var(--h-30363d); border-radius:4px; overflow:hidden; --mt-fs:15px; }
/* the table of figures under a small trend (data-mt-table): the pens are named there, so the heading keeps only the title and period */
.mt-has-tbl .mt-legend { visibility:hidden; }
.mt-tbl { flex:none; width:100%; border-collapse:collapse; margin-top:.35em; font-size:1.12em; font-variant-numeric:tabular-nums; color:var(--h-e6edf3); }
.mt-tbl th { font-size:inherit; text-transform:none; letter-spacing:0; font-weight:700; color:var(--h-c9d1d9); text-align:right; padding:.1em .6em; border-bottom:1px solid var(--h-30363d); white-space:nowrap; }
.mt-tbl td { text-align:right; padding:.1em .6em; border-bottom:1px solid var(--h-21262d); white-space:nowrap; }
.mt-tbl th:nth-child(2), .mt-tbl td.mt-tn { text-align:left; font-weight:700; overflow:hidden; text-overflow:ellipsis; max-width:14em; }
.mt-tbl td:first-child { width:2em; padding-right:0; } .mt-tbl td.mt-tn em { font-style:normal; font-weight:400; color:var(--h-8b949e); }
.mt-tbl td.mt-tc { color:var(--h-f0f6fc); font-weight:700; min-width:4.5em; }
/* the pressure setpoint in use is the green one (0 Normal, 1 Fill), as on the legacy screen */
.gst.has-fill:not(.fill) button.g-in.g-sp-n, .gst.has-fill.fill button.g-in.g-sp-f { background:#238636; border-color:var(--h-3fb950); color:#fff; }
/* Everything the widget has is on the page. Where the legacy screen gave two pieces of equipment one place and a site has both,
   the valve moves out to the left of the legacy screen (fitStation in widgets.js widens the canvas by GST_OVER when one has moved):
   a modulating valve out of a remote well's place, a valve out of local well C's (valve B also out of remote well C's and the first modulating valve's). */
.gst:has(.g-rwa:not(.gone)) .g-lmvb { transform:translateX(-330px); }
.gst:has(.g-rwb:not(.gone), .g-rwc:not(.gone)) .g-lmva { transform:translateX(-330px); }
/* 0.73.0: a valve showing its position boxes (FDBK / Manual / AUTO, widgets.js valvePos) has no room above the trends either, so it
   moves out too (gmod = its Modulating bit; through HillTop also gext = Cmds.ExtOk). Valve B sits one box-row lower than before 0.73.0,
   so valve A's boxes fit above it. */
.gst:has(.g-lwc:not(.gone)) .g-lva, .gst .g-lva.gmod:not(.g-needext), .gst .g-lva.gmod.gext { transform:translate(-1056px,-396px); }
.gst:has(.g-lwc:not(.gone), .g-rwc:not(.gone), .g-lmva:not(.gone)) .g-lvb, .gst .g-lvb.gmod:not(.g-needext), .gst .g-lvb.gmod.gext { transform:translate(-816px,-90px); }
.gst-fit .gst { overflow:visible; }
/* the generator and transfer-switch pictures in the heading are drawn only while the site is on its generator */
.g-onlyon:not(.on) { display:none; }
/* the small trend (widgets.js paintMini): heading with the pens, plot with its scale, time scale, cursor */
.mt { position:absolute; inset:0; display:flex; flex-direction:column; font-size:var(--mt-fs, 12px); line-height:1.25; color:var(--h-8b949e); padding:.3em .5em .25em; box-sizing:border-box; }
.mt-head { display:flex; align-items:center; gap:.7em; min-width:0; white-space:nowrap; flex:none; }
.mt-title { font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--h-c9d1d9); overflow:hidden; text-overflow:ellipsis; flex:0 1 auto; min-width:2em; }
.mt-period { font-size:.85em; flex:none; }
.mt-legend { display:flex; gap:.9em; flex:1 1 0; min-width:0; justify-content:flex-end; overflow:hidden; }
.mt-pen { display:inline-flex; align-items:center; gap:.35em; min-width:0; flex:0 1 auto; color:var(--h-c9d1d9); }
.mt-pen .mt-name { overflow:hidden; text-overflow:ellipsis; min-width:1.5em; }
.mt-pen .mt-val { color:var(--h-f0f6fc); font-variant-numeric:tabular-nums; flex:none; }
.mt-pen .mt-val:empty { display:none; }
.mt-pen em { font-style:normal; color:var(--h-8b949e); font-size:.9em; flex:none; }
.mt svg.mt-sw { position:static; flex:none; width:1.5em; height:.45em; }
.mt-open { flex:none; width:1.7em; height:1.7em; padding:0; display:inline-flex; align-items:center; justify-content:center; background:var(--h-161b22); border:1px solid var(--h-30363d); border-radius:4px; color:var(--h-8b949e); cursor:pointer; font-size:inherit; }
.mt-open:hover { color:var(--h-58a6ff); border-color:var(--h-58a6ff); }
.mt-open svg { position:static; width:1em; height:1em; }
.mt-plot { flex:1 1 0; min-height:0; display:flex; margin-top:.25em; }
.mt-y { position:relative; flex:none; width:3.4em; font-size:.9em; font-variant-numeric:tabular-nums; }
.mt-y span { position:absolute; right:.45em; transform:translateY(-50%); white-space:nowrap; }
.mt-y-r span { right:auto; left:.45em; }
.mt-two .mt-area { border-right:1px solid var(--h-30363d); }
.mt-two .mt-x { padding-right:3.06em; }
.mt-area { position:relative; flex:1 1 0; min-width:0; cursor:crosshair; touch-action:pan-y; border-left:1px solid var(--h-30363d); border-bottom:1px solid var(--h-30363d); }
.mt-area svg { position:absolute; inset:0; width:100%; height:100%; display:block; }
.mt-cur { position:absolute; top:0; bottom:0; width:0; border-left:1px solid var(--h-e6edf3); pointer-events:none; z-index:3; }
.mt-x { position:relative; display:flex; justify-content:space-between; flex:none; padding-left:3.4em; font-size:.9em; margin-top:.15em; white-space:nowrap; }
.mt-at { position:absolute; top:-.05em; transform:translateX(-50%); margin-left:1.7em; background:var(--h-e6edf3); color:var(--h-0d1117); font-weight:700; border-radius:3px; padding:0 .45em; z-index:3; }
.mt-none { margin:auto; font-size:.95em; }
/* more than two pens: the names get a line of their own, so they can be read */
.mt-many .mt-head { flex-wrap:wrap; row-gap:.1em; }
.mt-many .mt-period { flex:1 1 auto; }
.mt-many .mt-legend { order:5; flex:1 1 100%; justify-content:flex-start; gap:1.3em; }
.mt-pen .mt-name { min-width:3em; }
/* a station asset page is one view: the canvas carries its own trends, so the page's trend block is left out */
main.one-view #trendBlock { display:none; }
.gst [data-perm-off] { opacity:1 !important; }
/* Control Site in POLL: the station is only read, so every other control on its page is switched off until it is set to WRITE */
.gst.has-site:not(.write) .g-in, .gst.has-site:not(.write) select.g-sel:not(.g-site) { pointer-events:none; opacity:.5 !important; }
.st-grid.has-site:not(.write) .st-cmd:not(.st-site) .ctl { pointer-events:none; opacity:.45; }
select.g-site { border:2px solid var(--h-f0b429); font-weight:800; }
.gst.write select.g-site { border-color:var(--h-3fb950); }

/* ── designed look (web/design.js, made in the builder) - every class starts dz- ───────────────────────── */
.dz-fit { position:relative; width:100%; overflow:hidden; }
.dz-canvas { position:absolute; left:0; top:0; transform-origin:0 0; background:var(--h-0d1117); border-radius:6px; }
.dz-tilefit .dz-canvas { background:transparent; }
.dz-part { position:absolute; box-sizing:border-box; --dz-c:var(--h-4b5563); --dz-f:var(--h-21262d); color:var(--h-e6edf3); font-size:13px; }
.dz-part.gone { display:none; }
.dz-rot { position:absolute; transform-origin:50% 50%; }
/* ── electrical one-line symbols (web/symbols.js; 0.36.0). Lines are 3 thick and a bus 6, as on the demo one-line. ──
   --dz-es is the colour of the part that shows a state. A symbol whose state is not tied (no dz-elive) is a plain sketch. */
.dz-esym { color:var(--h-c9d1d9); --dz-es:currentColor; --dz-e2:currentColor; }
.dz-ebody { position:absolute; inset:0; }
.dz-esvg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:square; stroke-linejoin:miter; }
.dz-esvg .dz-efill { fill:currentColor; }
.dz-esvg .dz-etxt { fill:currentColor; stroke:none; font-weight:700; font-family:inherit; text-anchor:middle; dominant-baseline:central; }
.dz-esvg .dz-e2 { stroke:var(--dz-e2); }
.dz-esvg .dz-est { stroke:var(--dz-es); } .dz-esvg .dz-est.dz-efill { fill:var(--dz-es); }
.dz-esvg .dz-ebox { fill:var(--h-0d1117); }
/* closed / open: both positions are drawn, one is shown. Not tied: the closed position, as a drawing shows it. */
.dz-esym .dz-eo { display:none; }
.dz-esym.dz-elive:not(.dz-on) .dz-ec { display:none; } .dz-esym.dz-elive:not(.dz-on) .dz-eo { display:inline; }
/* dz-esc: the site's colours (Build, One-line diagrams). html.ol-gc = the site draws closed green; otherwise closed is red.
   One choice for the whole site: a symbol never carries colours of its own (0.37.0). dz-eplain = shape only, no colour. */
.dz-esym.dz-elive.dz-esc.dz-on { --dz-es:var(--h-f85149); } .dz-esym.dz-elive.dz-esc:not(.dz-on) { --dz-es:var(--h-3fb950); }
html.ol-gc .dz-esym.dz-elive.dz-esc.dz-on { --dz-es:var(--h-3fb950); } html.ol-gc .dz-esym.dz-elive.dz-esc:not(.dz-on) { --dz-es:var(--h-f85149); }
.dz-esym.dz-elive.dz-ek-switch.dz-on .dz-ebox { fill:var(--dz-es); } /* a closed breaker is a solid square */
.dz-esym.dz-elive.dz-ek-switch.dz-on .dz-etxt { fill:var(--h-0d1117); }
/* coloured by a value (0.38.0): the whole symbol - line, bus, equipment - takes the colour of its state. A fault still wins (amber, flashing). */
.dz-esym.dz-lv-off:not(.dz-flt) .dz-ebody { color:var(--dz-coff) !important; --dz-e2:var(--dz-coff) !important; } .dz-esym.dz-lv-lo:not(.dz-flt) .dz-ebody { color:var(--dz-clo) !important; --dz-e2:var(--dz-clo) !important; } .dz-esym.dz-lv-hi:not(.dz-flt) .dz-ebody { color:var(--dz-chi) !important; --dz-e2:var(--dz-chi) !important; }
.dz-esym.dz-ek-wire.dz-lv-off .dz-esvg line { stroke-dasharray:14 13; } /* an OFF line or bus is dashed too: colour alone is not enough. Gaps wider than a bus is thick (round ends close a small gap). Not on equipment: a small circle falls apart. */
/* equipment and wires that are tied to an on/off value dim while it is off */
.dz-esym.dz-elive:is(.dz-ek-device, .dz-ek-wire):not(.dz-on) .dz-ebody { opacity:.38; }
/* tripped or in fault: amber, and it flashes */
.dz-esym.dz-flt { --dz-es:var(--h-f0b429); }
.dz-esym.dz-flt .dz-ebody { color:var(--h-f0b429) !important; animation:dz-blink 1s steps(2) infinite; }
.dz-esym.dz-flt.dz-ek-switch .dz-ebox { fill:var(--h-f0b429); }
/* the name and the value beside a symbol: never turned, on the side chosen */
.dz-etag { position:absolute; white-space:nowrap; line-height:1.25; pointer-events:none; }
.dz-eat-right { left:calc(100% + 6px); top:50%; transform:translateY(-50%); text-align:left; }
.dz-eat-left { right:calc(100% + 6px); top:50%; transform:translateY(-50%); text-align:right; }
.dz-eat-above { bottom:calc(100% + 3px); left:50%; transform:translateX(-50%); text-align:center; }
.dz-eat-below { top:calc(100% + 3px); left:50%; transform:translateX(-50%); text-align:center; }
.dz-elab { font-size:14px; color:var(--h-c9d1d9); font-weight:500; }
/* a value on a one-line sits in a box, like a value placed on a drawing (0.39.1; owner: "keep the boxes around the numbers - makes them stand out better") */
.dz-eval { display:inline-block; font-size:15px; font-weight:700; line-height:1.2; color:var(--h-e6edf3); padding:.16em .5em; margin-top:2px; border-radius:.45em; background:rgba(13,17,23,.92); border:1.5px solid var(--h-3fb950); box-shadow:0 1px 4px rgba(0,0,0,.5); }
.dz-eval.bad { border-color:var(--h-d29922); color:var(--h-d29922); } /* not being read: yellow, as on a drawing */
/* in alarm (0.40.0): the value box turns red like a value on a drawing, and the symbol gets a red ring - a breaker with no value shown is marked too */
.dz-part.ol-alarm .dz-eval, .dz-part.ol-alarm .dz-eval.bad { background:#da3633; border-color:var(--h-ff7b72); color:#fff; }
.dz-part.ol-alarm::after { content:''; position:absolute; inset:-7px; border:3px solid var(--h-f85149); border-radius:7px; pointer-events:none; animation:ol-alarm 1s ease-in-out infinite alternate; }
@keyframes ol-alarm { from { opacity:1; } to { opacity:.45; } }
.ol-sw-alarm { color:var(--h-f85149); border-radius:4px; }
.dz-icon .dz-esym .dz-ebody { color:var(--h-c9d1d9); }
/* a one-line on the Live page and in the builder: the sheet is dark in both themes, like an uploaded drawing */
.ol-sheet { background:var(--h-0d1117); border:1px solid var(--h-30363d); border-radius:8px; overflow:hidden; user-select:none; -webkit-user-select:none; } /* dragging or double-clicking the sheet must not select its words (0.40.1), as on an uploaded drawing */
.ol-sheet .dz-canvas { background:var(--h-0d1117); }
.ol-sheet .dz-fit { overflow:auto; } .ol-sheet .dz-fit.zoomed { cursor:grab; touch-action:none; } .ol-sheet .dz-fit.zoomed:active { cursor:grabbing; }
.ol-bar { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:6px 8px 6px 4px; border-bottom:1px solid var(--h-30363d); background:var(--h-0d1117); } .ol-bar .ol-key { border:0; padding:2px 8px; flex:0 1 auto; }
.ol-zoomhost { margin-left:auto; user-select:none; -webkit-user-select:none; } .ol-zoom { display:flex; align-items:center; gap:4px; } .ol-zoom button:not(.info-btn) { background:var(--h-21262d); color:var(--h-e6edf3); border:1px solid var(--h-30363d); border-radius:6px; min-width:38px; height:34px; padding:0 10px; font:inherit; font-size:16px; font-weight:700; cursor:pointer; } .ol-zoom button:not(.info-btn):hover:not(:disabled) { border-color:var(--h-58a6ff); } .ol-zoom button:disabled { opacity:.4; cursor:default; } .ol-zoom .vis-pct { font-size:13px; color:var(--h-c9d1d9); }
/* a phone: the sheet never shrinks below 30 %, so it slides sideways instead of being cut off */
.ol-open { cursor:pointer; } .ol-open .dz-etag { pointer-events:auto; } .ol-open:hover .dz-eval, .ol-open:focus-visible .dz-eval { text-decoration:underline; } .ol-open:focus-visible { outline:2px solid var(--h-58a6ff); outline-offset:3px; }
.ol-pick { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 6px; }
.ol-choice { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:8px 10px; text-align:left; font:inherit; font-size:15px; color:var(--h-e6edf3); background:var(--h-161b22); border:2px solid var(--h-30363d); border-radius:10px; padding:12px 14px; min-width:250px; flex:1 1 250px; max-width:420px; cursor:pointer; }
.ol-choice:hover:not(:disabled) { border-color:var(--h-58a6ff); } .ol-choice.sel { border-color:var(--h-58a6ff); background:var(--h-21262d); box-shadow:inset 0 0 0 1px var(--h-58a6ff); }
.ol-choice.sel::after { content:'\2713  In use'; grid-column:1 / -1; font-weight:700; color:var(--h-58a6ff); }
.ol-choice .ol-note { grid-column:1 / -1; font-size:13px; color:var(--h-c9d1d9); }
.ol-sw { width:22px; height:22px; border:3px solid currentColor; display:inline-block; } .ol-sw-full { background:currentColor; }
.ol-sw-red { color:var(--h-f85149); } .ol-sw-green { color:var(--h-3fb950); } .ol-sw-amber { color:var(--h-f0b429); }
.ol-pick-msg { min-height:18px; font-size:14px; color:var(--h-3fb950); margin-bottom:10px; }
/* the key under a one-line on the Live page: what solid, hollow and amber mean, in this site's colours */
.ol-key { display:flex; flex-wrap:wrap; align-items:center; gap:6px 22px; padding:8px 12px; font-size:14px; color:var(--h-e6edf3); border-bottom:1px solid var(--h-30363d); background:var(--h-0d1117); }
.ol-key span { display:inline-flex; align-items:center; gap:8px; } .ol-key .ol-sw { width:16px; height:16px; }
.ol-key .ol-k-c { color:var(--h-f85149); } .ol-key .ol-k-o { color:var(--h-3fb950); } html.ol-gc .ol-key .ol-k-c { color:var(--h-3fb950); } html.ol-gc .ol-key .ol-k-o { color:var(--h-f85149); }
.ol-empty { padding:28px 16px; text-align:center; color:var(--h-c9d1d9); font-size:14px; }
/* the builder: a locked part, and the lines that show a dragged part is level with another */
.dz-edit .dz-part.bld-locked { cursor:default; }
.dz-edit .dz-part.bld-locked::after { content:'\1F512'; position:absolute; right:-4px; top:-9px; font-size:13px; line-height:1; z-index:6; }
.bld-guide { position:absolute; background:#f778ba; z-index:8; pointer-events:none; }
.dz-part.dz-cmd:not(.dz-run) { --dz-c:var(--h-d29922); --dz-f:rgba(210,153,34,.16); animation:dz-blink 1s steps(2) infinite; }
.dz-part.dz-run { --dz-c:var(--h-3fb950); --dz-f:rgba(63,185,80,.14); }
.dz-k-valve.dz-run { --dz-c:var(--h-2dd4bf); --dz-f:rgba(45,212,191,.14); }
.dz-k-modvalve.dz-run { --dz-c:var(--h-bc8cff); --dz-f:rgba(188,140,255,.14); }
.dz-part.dz-flt { --dz-c:var(--h-f85149); --dz-f:rgba(248,81,73,.16); animation:none; }
@keyframes dz-blink { 50% { --dz-c:var(--h-6e5418); } }
@keyframes dz-flow { to { background-position:24px 0; } }
.dz-sym { width:100%; height:100%; }
.dz-sym svg { width:100%; height:100%; display:block; overflow:visible; }
.dz-sym .dz-s { stroke:var(--dz-c); fill:none; }
.dz-sym .dz-f { fill:var(--dz-f); }
.dz-sym .dz-c { fill:var(--dz-c); }
.dz-sym text { font-family:Inter, Arial, sans-serif; }
.dz-sym .dz-ins { stroke:var(--dz-ins, var(--h-2dd4bf)); fill:var(--h-21262d); }
.dz-sym .dz-insc { fill:var(--dz-ins, var(--h-2dd4bf)); }
.dz-part.dz-alm .dz-ins { stroke:var(--h-f85149); } .dz-part.dz-alm .dz-insc { fill:var(--h-f85149); }
.dz-top { position:absolute; left:50%; bottom:100%; transform:translateX(-50%); padding-bottom:3px; white-space:nowrap; }
.dz-lab { font-weight:700; font-size:13px; text-align:center; color:var(--h-e6edf3); }
.dz-under { position:absolute; left:50%; top:100%; transform:translateX(-50%); padding-top:3px; display:flex; flex-direction:column; align-items:center; gap:3px; white-space:nowrap; }
.dz-v { font-weight:700; font-variant-numeric:tabular-nums; color:var(--h-e6edf3); }
.dz-v.bad, .dz-vin.bad { color:var(--h-8b949e); text-decoration:line-through; }
.dz-sub { font-weight:400; color:var(--h-8b949e); font-size:12px; }
.dz-mode { color:var(--h-79c0ff); }
.dz-sel { background:var(--h-21262d); color:var(--h-e6edf3); border:1px solid var(--h-30363d); border-radius:4px; font-size:12px; padding:2px 4px; max-width:100%; }
.dz-btns { display:inline-flex; gap:4px; }
.dz-btn { background:var(--h-21262d); color:var(--h-e6edf3); border:1px solid var(--h-30363d); border-radius:4px; font-size:11px; font-weight:700; padding:2px 8px; cursor:pointer; }
.dz-btn:hover { border-color:var(--h-58a6ff); }
.dz-in { background:var(--h-0d1117); border:1px solid var(--h-1f6feb); border-radius:4px; padding:2px 8px; cursor:pointer; color:var(--h-e6edf3); font:inherit; }
.dz-in:hover { border-color:var(--h-58a6ff); }
.dz-pic { width:100%; height:100%; position:relative; }
.dz-pic img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:none; }
.dz-part:not(.dz-run):not(.dz-flt) .dz-p-off, .dz-part.dz-run:not(.dz-flt) .dz-p-on, .dz-part.dz-flt .dz-p-flt { display:block; }
.dz-part.dz-flt .dz-pic:not(:has(.dz-p-flt)) .dz-p-off { display:block; }
.dz-tank { position:relative; width:100%; height:100%; border:2px solid var(--h-58a6ff); border-radius:4px; background:var(--h-010409); overflow:hidden; }
.dz-tank > i { position:absolute; left:0; right:0; bottom:0; height:calc(var(--f, 0) * 100%); background:linear-gradient(#1f6feb, #388bfd); transition:height .6s; }
.dz-part.dz-alm .dz-tank { border-color:var(--h-f85149); }
.dz-tmark { position:absolute; left:0; right:0; bottom:calc(var(--m, 0) * 100%); border-top:2px dashed var(--h-f0b429); }
.dz-tmark.gone { display:none; }
.dz-tower { position:relative; width:100%; height:100%; }
.dz-tower svg { position:absolute; inset:0; width:100%; height:100%; }
.dz-towfill { position:absolute; left:14.3%; right:14.3%; top:14.7%; height:40%; overflow:hidden; }
.dz-towfill > i { position:absolute; left:0; right:0; bottom:0; height:calc(var(--f, 0) * 100%); background:rgba(31,111,235,.45); transition:height .6s; }
.dz-box { width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; border:1px solid var(--h-30363d); border-radius:6px; background:var(--h-0d1117); overflow:hidden; }
.dz-box .dz-blab { font-size:11px; }
.dz-blab { color:var(--h-8b949e); font-size:12px; white-space:nowrap; flex:none; }
.dz-row { width:100%; height:100%; display:flex; align-items:center; gap:8px; }
.dz-lamprow .dz-blab { color:var(--h-c9d1d9); font-size:1em; } /* 0.77.2: a lamp's words are read, never grey on grey; the row's font size is the part's size option (13 when none) */
.dz-lamp { width:14px; height:14px; border-radius:50%; background:var(--dz-loff); flex:none; box-shadow:0 0 0 2px var(--h-0d1117); }
.dz-part.dz-on .dz-lamp { background:var(--dz-lon); box-shadow:0 0 8px var(--dz-lon); }
.dz-row-fill .dz-sel, .dz-row-fill .dz-mode { font-size:inherit; flex:1; min-width:0; height:100%; box-sizing:border-box; padding:0 4px; }
/* 0.29.0: the dial gauge. The scale is drawn into .dz-dial-scale by the binder; colours follow the theme. */
.dz-dial { position:relative; width:100%; height:100%; }
.dz-dial svg { display:block; width:100%; height:100%; }
.dz-dial-track { stroke:var(--h-30363d); } .dz-dial-zone { stroke:var(--h-f85149); }
.dz-dial-tick { stroke:var(--h-8b949e); stroke-width:1; } .dz-dial-tick.major { stroke:var(--h-e6edf3); stroke-width:2.2; }
.dz-dial-num { fill:var(--h-e6edf3); font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; }
.dz-dial-needle polygon { fill:var(--h-f0b429); transition:none; } .dz-dial-needle { transition:transform .4s; }
.dz-dial-hub { fill:var(--h-e6edf3); }
.dz-dial.over .dz-dial-needle polygon, .dz-dial.dz-dial-mark .dz-dial-needle polygon { fill:var(--h-f85149); }
.dz-dial.dz-dial-none .dz-dial-needle { opacity:.25; }
.dz-dial-read { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:center; align-items:baseline; gap:8px; line-height:1.1; pointer-events:none; }
.dz-dial-read .dz-v { font-size:20px; } .dz-dial .dz-blab { font-size:12px; color:var(--h-c9d1d9); }
.dz-dial-lab { position:absolute; left:20%; right:20%; top:66%; text-align:center; overflow:hidden; text-overflow:ellipsis; pointer-events:none; }
/* 0.28.0: a value in a row with its history line, an upright bar and a ring - what the looks that come with Argos draw */
.dz-rowval { gap:10px; padding:0 2px; border-bottom:1px solid var(--h-21262d); }
.dz-rowval .dz-blab { font-size:13px; color:var(--h-c9d1d9); overflow:hidden; text-overflow:ellipsis; flex:0 1 auto; min-width:0; }
.dz-rowval .spark { flex:1 1 60px; } .dz-gap { flex:1; }
.dz-rowval .dz-v, .dz-rowval .dz-in { font-size:15px; flex:none; }
.dz-vcol { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; gap:5px; }
.dz-vcol .dz-blab { font-weight:700; color:var(--h-c9d1d9); }
.dz-vbar { flex:1; width:100%; min-height:0; background:var(--h-0d1117); border:1px solid var(--h-30363d); border-radius:6px; overflow:hidden; display:flex; align-items:flex-end; }
.dz-vbar > i { display:block; width:100%; height:calc(var(--f, 0) * 100%); background:#f0b429; transition:height .4s; }
.dz-vbar > i.over { background:#f85149; }
.dz-vcol .dz-v { font-size:13px; }
.dz-ring { position:relative; width:100%; height:100%; }
.dz-ring svg { display:block; width:100%; height:100%; }
.dz-ring-bg { stroke:var(--h-30363d); }
.dz-ring-mid { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding-top:4%; }
.dz-ring-mid .dz-v { font-size:26px; }
.dz-bar { flex:1; height:10px; background:var(--h-21262d); border-radius:5px; overflow:hidden; position:relative; }
.dz-bar > i { position:absolute; left:0; top:0; bottom:0; width:calc(var(--f, 0) * 100%); background:#388bfd; transition:width .6s; }
.dz-trend { width:100%; height:100%; position:relative; border:1px solid var(--h-30363d); border-radius:4px; background:var(--h-0d1117); overflow:hidden; }
.dz-trt { position:absolute; left:64px; top:4px; font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--h-8b949e); z-index:1; }
.dz-trend-g { position:absolute; inset:0; --mt-fs:13px; }
.dz-text { width:100%; height:100%; display:flex; align-items:center; font-weight:600; white-space:nowrap; overflow:visible; }
.dz-pipe { width:100%; height:100%; border-radius:3px; background:var(--h-30363d); }
.dz-part.dz-on .dz-pipe { background:repeating-linear-gradient(90deg, var(--dz-pc) 0 14px, color-mix(in srgb, var(--dz-pc) 60%, #000) 14px 24px); animation:dz-flow 1s linear infinite; }
.dz-frame { width:100%; height:100%; border:1px solid var(--h-30363d); border-radius:8px; background:var(--h-161b22); position:relative; }
.dz-ftitle { position:absolute; left:10px; top:-9px; background:var(--h-0d1117); padding:0 6px; font-size:12px; font-weight:700; color:var(--h-8b949e); }

/* the builder (web/builder.html) shows designed parts for editing: controls inside a part do not react, the chosen part is outlined */
.dz-icon .dz-part { position:absolute; left:0 !important; top:0 !important; width:30px !important; height:30px !important; }
.dz-icon .dz-top, .dz-icon .dz-under, .dz-icon .dz-blab, .dz-icon .dz-trt { display:none; }
.dz-edit .dz-canvas { position:relative; outline:1px dashed var(--h-30363d); }
.dz-edit.grid .dz-canvas { background-image:radial-gradient(var(--h-21262d) 1px, transparent 1px); background-size:16px 16px; }
.dz-edit .dz-part { cursor:move; }
.dz-edit .dz-part * { pointer-events:none; }
.dz-edit .dz-part.dz-picked { outline:2px solid var(--h-58a6ff); outline-offset:2px; z-index:5; }
/* several parts chosen in the builder: the one clicked last (the pattern for "make the same") stands out */
.dz-edit .dz-part.bld-main { outline:3px solid var(--h-e6edf3); outline-offset:2px; box-shadow:0 0 0 6px rgba(88,166,255,.55); }
.dz-edit .dz-part.dz-needs { outline:1px dashed var(--h-d29922); outline-offset:1px; }

/* ── Playback (web/playback.js): the screen replayed from history. Everything here starts with pb-. ── */
.pb-open { display:inline-flex; align-items:center; gap:6px; background:rgba(210,153,34,.12); color:var(--h-e3b341); border:1px solid var(--h-9e6a03); border-radius:6px; padding:0 12px; min-height:30px; font:inherit; font-weight:700; cursor:pointer; white-space:nowrap; }
.pb-open:hover { border-color:var(--h-e3b341); }
/* the playback frame is its own box laid over the replayed part of the window (placed by playback.js): the same on all four sides, never under a panel or a scroll bar */
.pb-outline { position:fixed; z-index:60; pointer-events:none; box-sizing:border-box; border:3px solid var(--h-d29922); border-radius:4px; }
.pb-host { display:contents; }
.pb-more { margin-bottom:12px; min-width:0; }
.pb-more:not(:has([open])) { margin-top:-6px; }
.pb-bar { position:sticky; top:0; z-index:30; background:var(--h-1c1a12); border:1px solid var(--h-9e6a03); border-radius:8px; padding:8px 10px; margin-bottom:8px; display:flex; flex-direction:column; gap:7px; min-width:0; box-shadow:0 6px 16px rgba(0,0,0,.45); }
.pb-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; min-width:0; }
.pb-grow { flex:1 1 0; min-width:0; }
.pb-tag { background:#d29922; color:#0d1117; font-size:11px; font-weight:800; letter-spacing:.1em; padding:3px 9px; border-radius:4px; }
.pb-clock { font-size:clamp(15px,2.4vw,20px); font-weight:700; font-variant-numeric:tabular-nums; color:var(--h-f0f6fc); white-space:nowrap; }
.pb-state { font-size:12px; color:var(--h-8b949e); white-space:nowrap; }
.pb-state.run { color:var(--h-e3b341); font-weight:700; }
.pb-btn { background:var(--h-21262d); color:var(--h-e6edf3); border:1px solid var(--h-30363d); border-radius:6px; padding:0 11px; height:30px; font:inherit; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; }
.pb-btn:hover:not(:disabled) { border-color:var(--h-58a6ff); }
.pb-btn:disabled { opacity:.45; cursor:not-allowed; }
.pb-btn.pri { background:rgba(210,153,34,.16); border-color:var(--h-9e6a03); color:var(--h-e3b341); }
.pb-btn.danger { border-color:var(--h-f85149); color:var(--h-f85149); }
.pb-btn.small { height:26px; padding:0 9px; font-size:11px; }
.pb-btn.pb-live { background:rgba(63,185,80,.14); border-color:var(--h-238636); color:var(--h-3fb950); }
.pb-keys { display:inline-flex; gap:4px; flex-shrink:0; }
.pb-key { width:36px; height:32px; padding:0; background:var(--h-21262d); color:var(--h-e6edf3); border:1px solid var(--h-30363d); border-radius:6px; font-size:14px; line-height:1; cursor:pointer; }
.pb-key:hover { border-color:var(--h-e3b341); }
.pb-key.pb-play { width:48px; background:#d29922; border-color:var(--h-d29922); color:#0d1117; font-weight:800; }
.pb-speed { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--h-8b949e); white-space:nowrap; }
.pb-speed select { width:auto; height:30px; background:var(--h-0d1117); color:var(--h-e6edf3); border:1px solid var(--h-30363d); border-radius:6px; padding:0 6px; font:inherit; }
.pb-line { flex:1 1 260px; min-width:0; display:flex; align-items:center; gap:8px; }
.pb-edge { font-size:10px; color:var(--h-8b949e); white-space:nowrap; font-variant-numeric:tabular-nums; }
.pb-track { position:relative; flex:1 1 0; min-width:60px; height:26px; }
.pb-track canvas { position:absolute; left:0; top:0; display:block; }
.pb-track input[type=range] { position:absolute; inset:0; width:100%; height:26px; margin:0; padding:0; background:transparent; border:0; -webkit-appearance:none; appearance:none; cursor:pointer; }
.pb-track input[type=range]::-webkit-slider-runnable-track { background:transparent; height:26px; }
.pb-track input[type=range]::-moz-range-track { background:transparent; height:26px; }
.pb-track input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:4px; height:26px; border-radius:2px; background:var(--h-f0f6fc); box-shadow:0 0 0 2px rgba(13,17,23,.8); }
.pb-track input[type=range]::-moz-range-thumb { width:4px; height:26px; border:0; border-radius:2px; background:var(--h-f0f6fc); box-shadow:0 0 0 2px rgba(13,17,23,.8); }
.pb-track input[type=range]:focus-visible { outline:2px solid var(--h-58a6ff); outline-offset:2px; }
.pb-folds { align-items:flex-start; }
.pb-fold { flex:0 1 auto; min-width:0; border:1px solid var(--h-30363d); border-radius:6px; background:var(--h-0d1117); }
.pb-fold[open] { flex:1 1 320px; }
.pb-fold > summary { list-style:none; cursor:pointer; user-select:none; display:flex; align-items:center; gap:6px; padding:0 10px; min-height:30px; font-size:12px; font-weight:600; color:var(--h-c9d1d9); white-space:nowrap; }
.pb-fold > summary::-webkit-details-marker { display:none; }
.pb-fold > summary .chevron { display:inline-block; transition:transform .12s; color:var(--h-8b949e); }
.pb-fold[open] > summary .chevron { transform:rotate(90deg); }
.pb-n { font-size:10px; font-weight:800; background:var(--h-21262d); color:var(--h-8b949e); border-radius:8px; padding:1px 7px; }
input.pb-find { display:block; width:calc(100% - 16px); margin:0 8px 6px; height:28px; background:var(--h-161b22); color:var(--h-e6edf3); border:1px solid var(--h-30363d); border-radius:6px; padding:0 8px; font:inherit; font-size:12px; }
.pb-list { max-height:190px; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--h-30363d) transparent; border-top:1px solid var(--h-21262d); position:relative; }
.pb-none { padding:10px; color:var(--h-8b949e); font-size:12px; }
.pb-item { display:flex; align-items:flex-start; gap:8px; width:100%; text-align:left; background:transparent; color:var(--h-c9d1d9); border:0; border-bottom:1px solid var(--h-161b22); border-radius:0; padding:5px 10px; height:auto; font:inherit; font-size:12px; font-weight:400; cursor:pointer; }
.pb-item:hover { background:var(--h-161b22); }
.pb-item.past { color:var(--h-8b949e); }
.pb-item.cur { background:rgba(210,153,34,.14); color:var(--h-f0f6fc); }
.pb-when { font-variant-numeric:tabular-nums; color:var(--h-8b949e); white-space:nowrap; flex-shrink:0; }
.pb-dot { width:8px; height:8px; border-radius:50%; margin-top:4px; flex-shrink:0; background:#58a6ff; }
.pb-item.alarm .pb-dot { background:#f85149; } .pb-item.clear .pb-dot { background:#3fb950; } .pb-item.out .pb-dot { background:#d29922; }
.pb-what { min-width:0; overflow-wrap:anywhere; }
.pb-what b { font-weight:600; display:block; }
.pb-what span { display:block; color:var(--h-8b949e); font-size:11px; }
.pb-tbl { width:100%; border-collapse:collapse; font-size:12px; }
.pb-tbl th { position:sticky; top:0; background:var(--h-161b22); color:var(--h-8b949e); font-size:10px; letter-spacing:.06em; text-transform:uppercase; text-align:left; padding:5px 10px; }
.pb-tbl td { padding:4px 10px; border-bottom:1px solid var(--h-161b22); overflow-wrap:anywhere; }
.pb-tbl td.then { color:var(--h-e3b341); font-weight:600; }
.pb-msg { font-size:12px; color:var(--h-e3b341); min-height:0; }
.pb-msg:empty { display:none; }
.pb-msg.bad { color:var(--h-f85149); }
/* controls on a screen that is showing the past are off */
body.pb-on [data-pb-locked] { opacity:.45 !important; cursor:not-allowed !important; }
/* the dialogs of the player: the same on every page, whatever that page's own dialog style is */
dialog.pb-dlg { background:var(--h-161b22); color:var(--h-e6edf3); border:1px solid var(--h-30363d); border-radius:12px; padding:18px 20px; width:560px; max-width:calc(100vw - 24px); max-height:calc(100vh - 24px); margin:auto; overflow:auto; font-size:13px; }
dialog.pb-dlg::backdrop { background:rgba(0,0,0,.65); }
dialog.pb-dlg h2 { font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--h-e3b341); margin:0 0 10px; display:flex; align-items:center; gap:6px; }
.pb-lead { color:var(--h-c9d1d9); line-height:1.55; margin:0 0 12px; overflow-wrap:anywhere; }
.pb-quick { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.pb-times { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:10px; }
.pb-times label, .pb-fl { display:flex; flex-direction:column; gap:4px; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--h-8b949e); margin-bottom:8px; }
.pb-times input, .pb-fl input, input.pb-link { height:32px; width:100%; min-width:0; background:var(--h-0d1117); color:var(--h-e6edf3); border:1px solid var(--h-30363d); border-radius:6px; padding:0 8px; font:inherit; font-size:13px; font-weight:400; letter-spacing:0; text-transform:none; color-scheme:dark; }
.pb-opt { font-weight:400; text-transform:none; letter-spacing:0; }
.pb-hint { color:var(--h-8b949e); font-size:12px; margin:4px 0 12px; min-height:16px; }
.pb-clips { margin-bottom:10px; }
.pb-clip { display:flex; align-items:center; gap:8px; padding:4px 8px; border-bottom:1px solid var(--h-161b22); }
.pb-clip-open { flex:1 1 0; min-width:0; text-align:left; background:transparent; color:var(--h-e6edf3); border:0; padding:4px 2px; height:auto; font:inherit; cursor:pointer; overflow-wrap:anywhere; }
.pb-clip-open:hover b { color:var(--h-e3b341); }
.pb-clip-open b { display:block; font-weight:600; } .pb-clip-open span { display:block; color:var(--h-8b949e); font-size:11px; }
.pb-err { color:var(--h-f85149); font-size:12px; min-height:16px; margin-top:6px; }
.pb-ok { color:var(--h-3fb950); font-size:12px; }
.pb-acts { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; }
@media (max-width:600px) { .pb-line { flex-basis:100%; } .pb-edge { display:none; } .pb-fold[open] { flex-basis:100%; } .pb-key { width:32px; } .pb-key.pb-play { width:42px; } .pb-speed-l { display:none; } .pb-bar { padding:6px 8px; gap:5px; } .pb-bar .pb-btn { height:28px; padding:0 8px; } .pb-clock { font-size:15px; } }
@media (max-height:560px) { .pb-bar { position:static; } } /* a phone on its side: the player scrolls with the page */
/* the wiper on a small trend during playback: a bright line at the playback clock, what is still to come dimmed */
.spark { position:relative; }
.pb-wipe { position:absolute; top:0; bottom:0; border-left:2px solid var(--h-e3b341); background:color-mix(in srgb, var(--h-0d1117) 62%, transparent); pointer-events:none; z-index:2; box-shadow:-1px 0 6px rgba(227,179,65,.55); }
.pb-here { display:inline-flex; align-items:center; justify-content:center; width:20px; height:18px; margin-left:4px; border:1px solid var(--h-9e6a03); border-radius:4px; color:var(--h-e3b341); font-size:9px; text-decoration:none; vertical-align:middle; }
.pb-here:hover { background:rgba(210,153,34,.18); border-color:var(--h-e3b341); }
a.pb-open { text-decoration:none; }
/* ── folding sections under an asset's page (Trend, Communication, Active alarms, All parameters): ap- ── */
details.ap-fold { margin-top:14px; margin-bottom:0; padding:0; min-width:0; }
details.ap-fold > summary { list-style:none; cursor:pointer; user-select:none; display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:11px 14px; min-width:0; }
details.ap-fold > summary::-webkit-details-marker { display:none; }
details.ap-fold > summary h2 { margin:0; }
.ap-grow { flex:1 1 0; }
.ap-chev { display:inline-block; color:var(--h-8b949e); font-size:12px; transition:transform .12s; }
details.ap-fold[open] > summary .ap-chev { transform:rotate(90deg); }
.ap-fact { font-size:12px; color:var(--h-8b949e); white-space:nowrap; }
.ap-fact .w-val { color:var(--h-c9d1d9); font-weight:600; }
.ap-fact.bad { color:var(--h-f85149); font-weight:700; }
.ap-body { padding:0 14px 14px; min-width:0; }
.ap-scroll { max-height:min(48vh,440px); overflow:auto; scrollbar-width:thin; scrollbar-color:var(--h-30363d) transparent; }
.ap-scroll .fp-table th { position:sticky; top:0; background:var(--h-161b22); z-index:1; }
input.ap-find { display:block; width:min(100%,320px); height:30px; margin:0 0 8px; background:var(--h-0d1117); color:var(--h-e6edf3); border:1px solid var(--h-30363d); border-radius:6px; padding:0 8px; font:inherit; }

/* ── Expanders (owner, 2026-10-09: "increase the size and highlight of the expanders - we will have older guys running
   this system and vision will be an issue"). ONE look for the arrow that opens and closes a section, on every page:
   a blue box 26 px square with a bold arrow, brighter when the section is open or the pointer is on its heading.
   A page gives its arrow one of the classes below (or no arrow at all - a heading without one gets it from the last
   rule); it never sizes or colours the arrow itself. ── */
html :is(.gal-chev, .ap-chev, .al-chev, .bl-chev, .dt-chev, .nt-chev, .sys-chev), html .pb-fold > summary .chevron, html details.mn-ch > summary::before {
  display:inline-flex !important; align-items:center; justify-content:center; box-sizing:border-box; width:26px; height:26px; flex:none; margin-left:6px;
  border:1.5px solid var(--h-388bfd); border-radius:6px; background:rgba(56,139,253,.16); color:var(--h-58a6ff) !important;
  font-size:17px !important; font-weight:700; line-height:1; transition:transform .12s, background .12s; }
html .al-chev { width:20px; height:20px; font-size:14px !important; margin-left:0; }
html .pb-fold > summary .chevron, html details.mn-ch > summary::before { margin-left:0; margin-right:4px; }
summary:hover :is(.gal-chev, .ap-chev, .al-chev, .bl-chev, .dt-chev, .nt-chev, .chevron), details.mn-ch > summary:hover::before,
details[open] > summary :is(.gal-chev, .ap-chev, .al-chev, .bl-chev, .dt-chev, .nt-chev, .chevron), details.mn-ch[open] > summary::before { background:rgba(56,139,253,.34); }
/* the bottom banner's arrow (0.83.0) is a button, not a summary: open is aria-expanded */
html .sys-chev:hover, html .sys-chev[aria-expanded="true"] { background:rgba(56,139,253,.34); }
html .sys-chev:focus-visible { outline:2px solid var(--h-58a6ff); outline-offset:2px; }
summary:focus-visible :is(.gal-chev, .ap-chev, .al-chev, .bl-chev, .dt-chev, .nt-chev, .chevron) { outline:2px solid var(--h-58a6ff); outline-offset:2px; }
/* a folding heading that has no arrow of its own */
details:not(.mn-ch) > summary:not(:has(.gal-chev, .ap-chev, .al-chev, .bl-chev, .dt-chev, .nt-chev, .chevron)) { list-style:none; }
details:not(.mn-ch) > summary:not(:has(.gal-chev, .ap-chev, .al-chev, .bl-chev, .dt-chev, .nt-chev, .chevron))::-webkit-details-marker { display:none; }
details:not(.mn-ch) > summary:not(:has(.gal-chev, .ap-chev, .al-chev, .bl-chev, .dt-chev, .nt-chev, .chevron))::after { content:'▸'; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; width:26px; height:26px; flex:none; margin-left:auto;
  border:1.5px solid var(--h-388bfd); border-radius:6px; background:rgba(56,139,253,.16); color:var(--h-58a6ff); font-size:17px; font-weight:700; line-height:1; transition:transform .12s, background .12s; }
details[open]:not(.mn-ch) > summary:not(:has(.gal-chev, .ap-chev, .al-chev, .bl-chev, .dt-chev, .nt-chev, .chevron))::after { transform:rotate(90deg); background:rgba(56,139,253,.34); }
/* the small arrows of a tree (the scanner, the meter tree) */
html .scanrow .tw, html .tree .tw { width:22px; font-size:15px; color:var(--h-58a6ff); font-weight:700; }
@media print { html details.mn-ch > summary::before, details > summary::after { display:none !important; } }
/* paper has no use for the header, the bottom banner or the i buttons (0.26.0: the manual and the guides printed with the header on top) */
@media print { html .hdr, html .sys-foot, html .info-btn { display:none !important; } }

/* ── A link to a driver guide (0.26.0): beside an address or a driver's settings. Large enough to find and press. ── */
a.guide-link { display:inline-flex; align-items:center; gap:6px; margin-top:6px; padding:4px 10px; border:1.5px solid var(--h-388bfd); border-radius:6px; background:rgba(56,139,253,.12); color:var(--h-58a6ff); font-size:13px; font-weight:700; text-decoration:none; line-height:1.3; }
a.guide-link:hover { background:rgba(56,139,253,.3); }

/* ── Maintenance requests (0.45.0; web/maint.js draws these on several pages). One colour per state, always with its word:
   REQUESTED purple (the section's colour, and the Records button's when work is asked for), IN PROGRESS blue, DONE green, CANCELLED grey.
   Red is only the word OVERDUE / URGENT. ── */
dialog.mt-dlg { background:var(--h-161b22); color:var(--h-e6edf3); border:1px solid var(--h-30363d); border-radius:12px; padding:20px 22px; width:560px; max-width:calc(100vw - 24px); max-height:calc(100vh - 24px); margin:auto; overflow:auto; font-size:14px; }
dialog.mt-dlg::backdrop { background:rgba(0,0,0,.65); }
dialog.mt-dlg h2 { font-size:17px; font-weight:800; color:var(--h-e6edf3); margin:0 0 10px; display:flex; align-items:center; gap:8px; letter-spacing:0; text-transform:none; }
dialog.mt-dlg label.f { display:block; margin-top:12px; font-size:13px; font-weight:700; color:var(--h-e6edf3); }
dialog.mt-dlg select, dialog.mt-dlg input[type=date], dialog.mt-dlg textarea { width:100%; font:inherit; font-size:15px; padding:7px 9px; border:1px solid var(--h-30363d); border-radius:6px; background:var(--h-0d1117); color:var(--h-e6edf3); }
dialog.mt-dlg select, dialog.mt-dlg input[type=date] { height:38px; } dialog.mt-dlg textarea { resize:vertical; min-height:70px; }
dialog.mt-dlg p { font-size:15px; line-height:1.55; color:var(--h-e6edf3); margin:0 0 6px; }
dialog.mt-dlg .actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.mt-fixed { font-size:18px; font-weight:800; padding:4px 0; overflow-wrap:anywhere; }
.mt-alarm { margin-top:8px; padding:8px 10px; border:1px solid var(--h-30363d); border-radius:6px; background:var(--h-21262d); font-size:14px; overflow-wrap:anywhere; }
.mt-pick { display:flex; flex-wrap:wrap; gap:8px; } .mt-pick label { flex:1 1 130px; cursor:pointer; }
.mt-pick input { position:absolute; opacity:0; width:1px; height:1px; }
.mt-pick span { display:flex; align-items:center; justify-content:center; height:42px; padding:0 10px; border:1.5px solid var(--h-30363d); border-radius:8px; background:var(--h-21262d); color:var(--h-e6edf3); font-size:15px; font-weight:700; text-align:center; }
.mt-pick input:checked + span { background:#1f6feb; border-color:var(--h-388bfd); color:#fff; } .mt-pick input:focus-visible + span { outline:2px solid var(--h-58a6ff); outline-offset:2px; }
.mt-duerow { display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .mt-duerow input[type=date] { flex:1 1 170px; width:auto; }
.mt-mailnote { margin-top:12px; font-size:13.5px; color:var(--h-c9d1d9); } .mt-mailnote.warn { padding:8px 10px; border:1.5px solid var(--h-d29922); border-radius:6px; color:var(--h-e6edf3); font-weight:600; }
.mt-lead { font-weight:700; overflow-wrap:anywhere; }
a.mt-btn, button.mt-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:38px; padding:0 14px; border-radius:8px; border:1.5px solid var(--h-30363d); background:var(--h-21262d); color:var(--h-e6edf3); font:inherit; font-size:14px; font-weight:700; text-decoration:none; cursor:pointer; white-space:nowrap; }
a.mt-btn:hover, button.mt-btn:hover:not(:disabled) { border-color:var(--h-58a6ff); } button.mt-btn:disabled { opacity:.45; cursor:default; }
button.mt-btn.go, a.mt-btn.go { background:#1f6feb; border-color:var(--h-388bfd); color:#fff; } button.mt-btn.go:hover:not(:disabled) { background:#388bfd; }
button.mt-btn.ask { background:var(--h-a371f7); border-color:var(--h-a371f7); color:#fff; } button.mt-btn.ask svg { width:18px; height:18px; flex:none; }
.mt-card { border:1px solid var(--h-30363d); border-left:6px solid var(--h-a371f7); border-radius:8px; background:var(--h-161b22); padding:10px 12px; margin-bottom:8px; }
.mt-card.progress { border-left-color:var(--h-388bfd); } .mt-card.done { border-left-color:var(--h-238636); } .mt-card.cancelled { border-left-color:var(--h-30363d); }
.mt-line { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; } .mt-grow { flex:1; }
.mt-what { font-size:16px; font-weight:800; overflow-wrap:anywhere; min-width:0; } .mt-what a { color:var(--h-58a6ff); text-decoration:none; } .mt-what a:hover { text-decoration:underline; }
.mt-st { display:inline-block; padding:2px 9px; border-radius:9px; font-size:11.5px; font-weight:800; white-space:nowrap; background:var(--h-a371f7); color:#fff; }
.mt-st.progress { background:#1f6feb; } .mt-st.done { background:var(--h-238636); } .mt-st.cancelled { background:var(--h-2d333b); color:var(--h-e6edf3); }
.mt-urgent { display:inline-block; padding:1px 8px; border-radius:9px; font-size:11.5px; font-weight:800; border:1.5px solid var(--h-f85149); color:var(--h-ff7b72); white-space:nowrap; }
.mt-due { font-size:14px; font-weight:700; color:var(--h-e6edf3); white-space:nowrap; } .mt-due.late { color:var(--h-ff7b72); }
.mt-note { font-size:15px; margin-top:6px; overflow-wrap:anywhere; } .mt-sub { font-size:13px; color:var(--h-c9d1d9); margin-top:4px; overflow-wrap:anywhere; font-weight:400; }
.mt-nomail { color:var(--h-ff7b72); } .mt-did { margin-top:8px; padding:8px 10px; border-radius:6px; background:var(--h-21262d); font-size:14.5px; overflow-wrap:anywhere; }
.mt-acts { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; } .mt-acts:empty { display:none; }
.mt-empty { padding:14px; color:var(--h-c9d1d9); font-size:14px; border:1px dashed var(--h-30363d); border-radius:8px; }
/* the Records button on a card when maintenance is asked for on the asset */
a.tile-rec.req, a.tile-rec.req.has { background:var(--h-a371f7); border-color:var(--h-a371f7); color:#fff; }
a.tile-rec .tile-rec-m { font-weight:800; white-space:nowrap; } a.tile-rec .tile-rec-m[hidden] { display:none; }

/* Show registers (0.57.0): labels with the parameter and its address, over a drawn widget (web/widgets.js registers) */
.reg-layer { position:absolute; inset:0; pointer-events:none; z-index:40; }
.reg-chip { position:absolute; pointer-events:auto; font:10px/1.25 ui-monospace,Consolas,monospace; background:var(--h-0d1117); color:var(--h-c9d1d9); border:1px solid var(--h-58a6ff); border-left-width:3px; border-radius:3px; padding:1px 4px; white-space:nowrap; opacity:.93; cursor:default; max-width:340px; overflow:hidden; text-overflow:ellipsis; }
.reg-chip b { color:var(--h-e6edf3); font-weight:700; } .reg-chip span { color:var(--h-58a6ff); font-weight:700; } .reg-chip i { color:var(--h-8b949e); font-style:normal; } .reg-chip em { color:var(--h-d29922); font-style:normal; }
.reg-chip.reg-w { border-color:var(--h-d29922); } .reg-chip.reg-w span { color:var(--h-d29922); }
.reg-chip.reg-v { border-color:var(--h-8b949e); border-style:dashed; border-left-style:solid; }
.reg-chip.reg-top { z-index:5; opacity:1; max-width:none; }
.reg-hl { outline:2px solid var(--h-d29922) !important; outline-offset:2px; }
.reg-hidden { position:absolute; left:0; right:0; top:100%; z-index:6; border-radius:0 0 6px 6px; pointer-events:auto; font:11px/1.4 ui-monospace,Consolas,monospace; background:var(--h-161b22); color:var(--h-c9d1d9); border-top:1px dashed var(--h-8b949e); padding:4px 8px; } .reg-hidden span { color:var(--h-58a6ff); font-weight:700; }
/* Show registers as tag icons (0.64.0): one small tag per item; a click opens its card */
.reg-marks { position:absolute; inset:0; pointer-events:none; }
.reg-tag { position:absolute; pointer-events:auto; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; border:2px solid var(--h-58a6ff); border-radius:6px; background:var(--h-0d1117); color:var(--h-58a6ff); cursor:pointer; box-shadow:0 1px 4px color-mix(in srgb, var(--h-010409) 60%, transparent); }
.reg-tag svg { width:15px; height:15px; }
.reg-tag i { position:absolute; right:-7px; top:-8px; min-width:15px; height:15px; padding:0 3px; border-radius:8px; background:var(--h-58a6ff); color:var(--h-0d1117); font:800 10px/15px system-ui,sans-serif; font-style:normal; }
.reg-tag.reg-w { border-color:var(--h-d29922); color:var(--h-d29922); } .reg-tag.reg-w i { background:var(--h-d29922); }
.reg-tag.reg-v { border-style:dashed; border-color:var(--h-8b949e); color:var(--h-8b949e); } .reg-tag.reg-v i { background:var(--h-8b949e); }
.reg-tag:hover, .reg-tag.reg-open, .reg-tag.reg-top { background:var(--h-58a6ff); color:var(--h-0d1117); z-index:6; } .reg-tag.reg-w:hover, .reg-tag.reg-w.reg-open { background:var(--h-d29922); }
.reg-pop, .reg-list { pointer-events:auto; background:var(--h-161b22); color:var(--h-e6edf3); border:1px solid var(--h-58a6ff); border-radius:8px; box-shadow:0 6px 24px color-mix(in srgb, var(--h-010409) 70%, transparent); font-size:14px; }
.reg-pop { position:absolute; z-index:20; min-width:380px; max-width:min(560px, 92vw); padding:0 0 6px; }
.reg-list { position:fixed; z-index:90; right:16px; top:120px; width:min(560px, calc(100vw - 32px)); max-height:min(70vh, 640px); display:flex; flex-direction:column; }
.reg-pop-h { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border-bottom:1px solid var(--h-30363d); font-weight:700; }
.reg-pop-h i { font-style:normal; font-weight:400; color:var(--h-8b949e); margin-left:6px; }
.reg-x { width:30px; height:30px; border:1px solid var(--h-30363d); border-radius:6px; background:var(--h-21262d); color:var(--h-e6edf3); font-size:18px; line-height:1; cursor:pointer; }
.reg-row { display:grid; grid-template-columns:156px minmax(0,1fr); gap:2px 10px; padding:7px 10px; border-bottom:1px solid var(--h-21262d); text-align:left; }
.reg-row:last-child { border-bottom:0; }
.reg-side { grid-row:span 3; display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; }
.reg-role { color:var(--h-8b949e); font-size:12px; text-transform:uppercase; letter-spacing:.04em; padding-top:2px; }
/* The value of the tag NOW (0.72.1): a lamp and the word - ON green, OFF red, a measurement blue, no reading amber. Colour is never the
   only sign: the word is always there. */
.reg-now { display:inline-flex; align-items:center; gap:7px; max-width:100%; padding:4px 11px 4px 8px; border-radius:999px; border:1.5px solid; font:800 15px/1.1 "Bahnschrift","DIN Alternate","Segoe UI",sans-serif; letter-spacing:.06em; white-space:nowrap; }
.reg-now b { overflow:hidden; text-overflow:ellipsis; font-weight:800; }
.reg-now i { width:11px; height:11px; border-radius:50%; flex-shrink:0; background:currentColor; }
.reg-now.reg-st-on { color:var(--h-3fb950); border-color:var(--h-3fb950); background:color-mix(in srgb, var(--h-3fb950) 16%, transparent); }
.reg-now.reg-st-on i { box-shadow:0 0 0 3px color-mix(in srgb, var(--h-3fb950) 30%, transparent), 0 0 10px 2px var(--h-3fb950); }
.reg-now.reg-st-off { color:var(--h-f85149); border-color:var(--h-f85149); background:color-mix(in srgb, var(--h-f85149) 14%, transparent); }
.reg-now.reg-st-off i { box-shadow:0 0 0 3px color-mix(in srgb, var(--h-f85149) 25%, transparent); }
.reg-now.reg-st-num { color:var(--h-f0f6fc); border-color:var(--h-58a6ff); background:color-mix(in srgb, var(--h-58a6ff) 14%, transparent); letter-spacing:.02em; font-size:14px; }
.reg-now.reg-st-num i { color:var(--h-58a6ff); width:8px; height:8px; }
.reg-now.reg-st-bad { color:var(--h-d29922); border-color:var(--h-d29922); background:color-mix(in srgb, var(--h-d29922) 14%, transparent); font-size:12px; }
.reg-now.reg-st-wait { color:var(--h-8b949e); border-color:var(--h-30363d); border-style:dashed; font-size:12px; }
@media (prefers-reduced-motion: no-preference) { .reg-now.reg-st-on i { animation:reg-glow 1.6s ease-in-out infinite; } }
@keyframes reg-glow { 50% { box-shadow:0 0 0 4px color-mix(in srgb, var(--h-3fb950) 18%, transparent), 0 0 4px 1px var(--h-3fb950); } }
.reg-what b { color:var(--h-f0f6fc); font:700 14px/1.3 ui-monospace,Consolas,monospace; overflow-wrap:anywhere; } .reg-what small { display:block; color:var(--h-c9d1d9); font-size:13px; }
.reg-row code { grid-column:2; color:var(--h-58a6ff); font:700 14px/1.3 ui-monospace,Consolas,monospace; overflow-wrap:anywhere; }
.reg-more { grid-column:2; color:var(--h-8b949e); font-size:12px; }
.reg-list input.reg-find { box-sizing:border-box; width:auto; margin:8px 10px; padding:7px 10px; border:1px solid var(--h-30363d); border-radius:6px; background:var(--h-0d1117); color:var(--h-e6edf3); font:inherit; }
.reg-list-b { overflow:auto; min-height:0; }
.reg-li { display:block; width:100%; height:auto; min-height:0; padding:0; border:0; border-radius:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.reg-li:hover .reg-row { background:var(--h-21262d); }
.reg-none { padding:12px; color:var(--h-8b949e); }
.reg-bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 8px; padding:6px 10px; border:1px solid var(--h-30363d); border-radius:8px; background:var(--h-161b22); color:var(--h-c9d1d9); font-size:14px; }
.reg-bar .reg-tag { position:static; pointer-events:none; } .reg-count { font-weight:700; color:var(--h-e6edf3); } .reg-hint { color:var(--h-8b949e); flex:1 1 220px; }
.reg-mini { height:30px; padding:0 12px; border:1px solid var(--h-30363d); border-radius:6px; background:var(--h-21262d); color:var(--h-e6edf3); font:inherit; font-weight:600; cursor:pointer; }
.reg-mini:hover { border-color:var(--h-58a6ff); } .reg-mini[aria-pressed="true"] { background:var(--h-58a6ff); border-color:var(--h-58a6ff); color:var(--h-0d1117); }
.reg-btn { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border:1px solid var(--h-30363d); border-radius:7px; background:var(--h-21262d); color:var(--h-e6edf3); font:inherit; font-weight:700; cursor:pointer; white-space:nowrap; }
.reg-btn:hover { border-color:var(--h-58a6ff); } .reg-btn[aria-pressed="true"] { background:var(--h-58a6ff); border-color:var(--h-58a6ff); color:var(--h-0d1117); }

/* Communication off (0.71.0; owner: "turn the widget a yellow hue with water mark saying Comms Disabled"): a card or an asset
   page whose asset has Communication on unticked. A yellow wash over the whole of it and the words across it; the wash takes no
   clicks, so the card still opens and the page still scrolls. The words carry it - colour is never the only sign. */
.tile.comm-off, #face.comm-off { position:relative; border-color:var(--h-d29922); }
.comm-off-mark { position:absolute; inset:0; z-index:5; pointer-events:none; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:inherit;
  background:color-mix(in srgb, var(--h-d29922) 22%, transparent); }
.comm-off-mark span { transform:rotate(-18deg); padding:6px 14px; border:3px solid var(--h-d29922); border-radius:8px; color:var(--h-e3b341); font-size:clamp(18px, 3.2vw, 30px); font-weight:900; letter-spacing:.08em; white-space:nowrap;
  background:color-mix(in srgb, var(--h-0d1117) 55%, transparent); opacity:.92; }
#face.comm-off .comm-off-mark span { font-size:clamp(26px, 5vw, 56px); }
.tile .comm-off-mark span { font-size:20px; letter-spacing:.04em; padding:4px 10px; }