/* CoreSCADA. An instrument, not a brochure: readings and equipment state lead,
   color is kept for what is abnormal, and type stays readable on a phone. */
:root {
  color-scheme: light;
  --page:#f4f4f1; --surface:#fcfcfb; --raise:#efeeea; --sunk:#e9e8e3; --border:#dfded7; --strong-border:#c9c8c0;
  --ink:#0b0b0b; --ink2:#52514e; --muted:#6c6b66; --grid:#e1e0d9; --base:#c3c2b7;
  --c0:#2a78d6; --c1:#eb6834; --c2:#1baf7a; --c3:#eda100;
  --warntext:#8a5a00; --good:#0ca30c; --warn:#fab219; --serious:#ec835a; --crit:#d03b3b; --accent:#2a78d6;
  --equip:#3b3a37; --equip-off:#a9a8a1;
  /* the palette signals, setpoints and priorities are colored from, by name: each theme gives a name its own shade
     (--p-grey is gray: the palette names are the ones stored) */
  --p-grey:#8a8983; --p-blue:#2a78d6; --p-green:#1baf7a; --p-teal:#0f9bae; --p-purple:#8b5cd6;
  --p-amber:#eda100; --p-orange:#eb6834; --p-red:#d03b3b;
  --shadow: 0 1px 2px rgb(0 0 0 / .04);
  --rail: 212px;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page:#0d0d0d; --surface:#171716; --raise:#222220; --sunk:#111110; --border:#2a2a28; --strong-border:#3a3a37;
    --ink:#f4f4f1; --ink2:#c3c2b7; --muted:#8a8983; --grid:#2a2a28; --base:#3a3a37;
    --warntext:#e3a93a; --c0:#3987e5; --c1:#d95926; --c2:#199e70; --c3:#c98500; --accent:#3987e5;
    --equip:#d9d8d2; --equip-off:#5a5955; --shadow:none; --crit:#f05a5a;
  --p-grey:#8a8983; --p-blue:#3987e5; --p-green:#199e70; --p-teal:#17a2b5; --p-purple:#9a6fe0;
  --p-amber:#c98500; --p-orange:#d95926; --p-red:#e05252;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page:#0d0d0d; --surface:#171716; --raise:#222220; --sunk:#111110; --border:#2a2a28; --strong-border:#3a3a37;
  --ink:#f4f4f1; --ink2:#c3c2b7; --muted:#8a8983; --grid:#2a2a28; --base:#3a3a37;
  --warntext:#e3a93a; --c0:#3987e5; --c1:#d95926; --c2:#199e70; --c3:#c98500; --accent:#3987e5;
  --equip:#d9d8d2; --equip-off:#5a5955; --shadow:none; --crit:#f05a5a;
  --p-grey:#8a8983; --p-blue:#3987e5; --p-green:#199e70; --p-teal:#17a2b5; --p-purple:#9a6fe0;
  --p-amber:#c98500; --p-orange:#d95926; --p-red:#e05252;
}

/* ---------------------------------------------------------------- ground */
* { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }
body { margin:0; background:var(--page); color:var(--ink);
  font:14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; }
.num { font-variant-numeric: tabular-nums }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:12.5px }
.muted { color:var(--muted) } .ink2 { color:var(--ink2) } .small { font-size:12.5px } .strong { font-weight:620 }
[hidden] { display:none !important }
a { color:inherit }
h1 { font-size:20px; font-weight:650; letter-spacing:-.012em; margin:0 }
h2 { font-size:15px; font-weight:620; margin:0 }
h3 { font-size:13.5px; font-weight:620; margin:0 }
.grow { flex:1 }
.i { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none }
button, select, input, textarea { font:inherit; color:var(--ink) }
button { background:var(--surface); border:1px solid var(--border); border-radius:8px; min-height:34px; padding:0 12px; cursor:pointer;
  touch-action:manipulation; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:6px }
button:hover:not(:disabled) { background:var(--raise) }
button:disabled { opacity:.45; cursor:default }
button.primary { background:var(--ink); color:var(--surface); border-color:var(--ink); font-weight:560 }
button.primary:hover:not(:disabled) { background:var(--ink); opacity:.88 }
button.danger { color:var(--crit) }
button.icon { width:34px; padding:0; color:var(--ink2) }
button.link { border:0; background:none; color:var(--ink2); text-decoration:underline; text-underline-offset:3px; min-height:auto; padding:4px }
.textlink { color:var(--ink2); font-size:13px; text-decoration:underline; text-underline-offset:3px; background:none; border:0; padding:0; min-height:0; cursor:pointer; justify-self:start; text-align:left }
input, select, textarea { background:var(--surface); border:1px solid var(--border); border-radius:8px; min-height:36px; padding:5px 10px; max-width:100% }
textarea { resize:vertical; min-height:60px }
input:focus, select:focus, textarea:focus { outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent }
input:disabled, select:disabled, textarea:disabled, .field > input:disabled, .field > select:disabled, .field > textarea:disabled { color:var(--muted); background:var(--sunk); cursor:not-allowed; opacity:1 }   /* what cannot be changed here looks it */
button:focus-visible, canvas:focus-visible, a:focus-visible, summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px }
kbd { font:11.5px ui-monospace, Menlo, monospace; border:1px solid var(--border); border-bottom-width:2px; border-radius:5px; padding:1px 5px; color:var(--ink2); background:var(--surface) }
@media (pointer:coarse) { button { min-height:42px } button.icon { width:42px } input, select { min-height:44px; font-size:16px } }

/* ---------------------------------------------------------------- the shell */
.rail { position:fixed; inset:0 auto 0 0; width:var(--rail); display:flex; flex-direction:column; gap:6px; padding:14px 10px 12px;
  background:var(--surface); border-right:1px solid var(--border); z-index:30; overflow-y:auto }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; padding:4px 8px 10px }
.brand .mark { width:26px; height:26px; color:var(--ink); flex:none }
.brand b { display:block; font-size:15px; font-weight:680; letter-spacing:-.01em; line-height:1.15 }
.brand small { display:block; font-size:12px; color:var(--muted) }
.rail .search { justify-content:flex-start; gap:8px; width:100%; color:var(--ink2); background:var(--page); margin-bottom:6px }
.rail .search span { flex:1; text-align:left }
.links { display:flex; flex-direction:column; gap:2px }
.links a { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; text-decoration:none; color:var(--ink2); font-weight:500 }
.links a:hover { background:var(--raise); color:var(--ink) }
.links a[aria-current="page"] { background:var(--raise); color:var(--ink); font-weight:620; box-shadow:inset 3px 0 0 var(--ink) }
.links a span:not(.badge) { flex:1 }
.badge { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; font-size:11.5px; font-weight:700;
  background:var(--crit); color:#fff; font-variant-numeric:tabular-nums }
.badge.quiet { background:var(--muted) }
.watch { display:flex; gap:10px; align-items:flex-start; padding:10px; border:1px solid var(--border); border-radius:10px; font-size:12.5px; background:var(--page) }
.watch b { display:block; font-weight:600 } .watch small { display:block; color:var(--muted) }
.dot { width:9px; height:9px; border-radius:50%; background:var(--muted); flex:none; margin-top:4px }
.dot.good { background:var(--good) } .dot.crit { background:var(--crit); box-shadow:0 0 0 3px color-mix(in srgb, var(--crit) 22%, transparent) }
.who .account { display:flex; gap:10px; align-items:center; padding:8px; border-radius:8px; text-decoration:none }
.who .account:hover, .who .account[aria-current="page"] { background:var(--raise) }
.who b { display:block; font-size:13px; font-weight:600 } .who small { display:block; color:var(--muted); font-size:12px }
.me { display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--raise); border:1px solid var(--border);
  font-weight:650; font-size:12px; text-decoration:none; flex:none }
.content { margin-left:var(--rail); padding:16px 24px 32px; min-width:0 }
#main { max-width:1680px }
.phonebar, .bottomnav { display:none }
.phone-only { display:none !important }

@media (max-width:760px) {
  .rail { display:none }
  .content { margin-left:0; padding:10px 12px calc(84px + env(safe-area-inset-bottom)) }
  .phonebar { display:flex; align-items:center; gap:8px; position:sticky; top:0; z-index:25; height:54px; padding:0 12px;
    background:color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--border) }
  .phonebar .brand { padding:0; min-width:0; flex:0 1 auto } .phonebar .brand .mark { width:24px; height:24px }
  .phonebar .brand b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0 }
  .phonewatch { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--crit); font-weight:600; min-width:0; flex:0 1 auto }
  .phonewatch .pw { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:34vw }
  .phonewatch .dot { margin:0 }
  .bottomnav { display:grid; grid-template-columns:repeat(5, 1fr); position:fixed; inset:auto 0 0 0; z-index:25;
    padding:4px 4px calc(4px + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--surface) 96%, transparent);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-top:1px solid var(--border) }
  .bottomnav a, .bottomnav button { display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 2px; min-height:54px; border:0; background:none;
    border-radius:10px; text-decoration:none; color:var(--muted); font-size:11.5px; font-weight:560; position:relative }
  .bottomnav button { justify-content:flex-start }     /* its icon and word on the same lines as the links' */
  .bottomnav a[aria-current="page"], .bottomnav button.on { color:var(--ink) }
  .bottomnav a[aria-current="page"] .i, .bottomnav button.on .i { stroke-width:2.3 }
  .bottomnav .i { width:22px; height:22px }
  .bottomnav .badge { position:absolute; top:3px; left:calc(50% + 5px); min-width:18px; height:18px; font-size:11px }
  .phone-only { display:inline-flex !important }
}
.sheet { border:0; border-radius:16px 16px 0 0; margin:auto 0 0; width:100%; max-width:100%; padding:10px 10px calc(14px + env(safe-area-inset-bottom)) }
.sheet:focus { outline:none }
.sheetlist { display:flex; flex-direction:column }
.sheetlist a, .sheetlist button { display:flex; align-items:center; gap:14px; padding:14px 12px; border:0; background:none; text-decoration:none;
  font-size:16px; justify-content:flex-start; border-radius:10px; min-height:52px }
.sheetlist a:hover, .sheetlist button:hover { background:var(--raise) }

/* the most urgent alarm, on every page but Alarms */
#strip:empty { display:none }
.strip { display:flex; align-items:center; gap:10px; padding:8px 8px 8px 12px; border:1px solid var(--border);
  border-left:4px solid var(--crit); border-radius:10px; background:var(--surface); margin-bottom:12px; box-shadow:var(--shadow) }
.strip.p1 { border-left-color:var(--prio-1, var(--crit)) } .strip.p2 { border-left-color:var(--prio-2, var(--serious)) }
.strip.p3 { border-left-color:var(--prio-3, var(--warn)) } .strip.p4 { border-left-color:var(--prio-4, var(--muted)) }
.strip .what { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink2) }
.strip .what b { color:var(--ink); font-weight:620 }
.strip .when { color:var(--ink2); font-size:12.5px; white-space:nowrap }
.strip .more { color:var(--ink2); font-size:13px; white-space:nowrap; padding:0 6px }
@media (max-width:560px) { .strip .when { display:none } }

/* ---------------------------------------------------------------- common pieces */
.card { background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); min-width:0 }
.card.pad { padding:16px }
.cardhead { display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap; padding:12px 16px; border-bottom:1px solid var(--border) }
.card > .cardhead:last-child { border-bottom:0 }
.pagehead { display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap; margin:4px 0 14px }
.pagebar { display:flex; gap:8px 10px; flex-wrap:wrap; align-items:center; margin-bottom:12px }
.pagebar input[type=search] { width:260px }
@media (max-width:560px) { .pagebar input[type=search], .pagebar select { width:100%; flex:1 1 100% } .custom { display:none } }
.page { max-width:1240px } .page.wide { max-width:1680px } .page.narrow { max-width:640px }
.page > * + * { margin-top:12px }
.tabs { display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; max-width:100% }
.tabs::-webkit-scrollbar { display:none }
.tabs a, .tabbtn { text-decoration:none; color:var(--ink2); padding:6px 12px; border-radius:8px; white-space:nowrap; border:1px solid transparent; min-height:34px; display:inline-flex; align-items:center }
.tabs a:hover, .tabbtn:hover { background:var(--raise) }
.tabbtn { background:none; gap:4px }
.tabs a[aria-current="page"] { color:var(--ink); background:var(--surface); border-color:var(--border); font-weight:620; box-shadow:var(--shadow) }
.seg { display:inline-flex; border:1px solid var(--border); border-radius:9px; background:var(--surface); padding:2px; gap:2px; max-width:100%; overflow-x:auto; scrollbar-width:none }
.seg::-webkit-scrollbar { display:none }
.seg button { border:0; border-radius:7px; background:transparent; min-height:30px; padding:0 10px; color:var(--ink2) }
.seg button[aria-pressed="true"] { background:var(--ink); color:var(--surface) }
@media (pointer:coarse) { .seg button { min-height:38px; min-width:44px } }
.empty { padding:28px 16px; color:var(--muted); text-align:center; display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap }
.empty.big { padding:56px 16px; flex-direction:column }
.note { color:var(--ink2); font-size:12.5px; background:var(--raise); border-radius:8px; padding:8px 10px }
.error { color:var(--crit); font-size:13px }
.chip { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); border-radius:999px; padding:0 10px 0 8px; min-height:26px;
  font-size:12.5px; color:var(--ink2); background:var(--surface); white-space:nowrap }
.chip .d { width:7px; height:7px; border-radius:50%; background:var(--base) }
.chip.on { color:var(--ink) } .chip.on .d { background:var(--equip) }
.chip.unknown { color:var(--muted); border-style:dashed }
.chip b { font-weight:620 }
.chip.sim { color:var(--ink2); border-style:dashed; font-weight:560 }
.ic { display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; font-size:10px; font-weight:800; color:#fff; flex:none; line-height:1; vertical-align:middle; position:relative; top:-1px }
.ic.big { width:30px; height:30px; font-size:15px }
.ic.good { background:var(--good) } .ic.crit { background:var(--crit) } .ic.idle { background:var(--muted) }
.ic.p1 { background:var(--prio-1, var(--crit)) } .ic.p2 { background:var(--prio-2, var(--serious)) }
.ic.p3 { background:var(--prio-3, var(--warn)); color:#0b0b0b } .ic.p4 { background:var(--prio-4, var(--muted)) }
.pill-state { display:inline-flex; align-items:center; gap:7px; padding:3px 10px; border-radius:999px; font-size:12.5px; font-weight:620;
  border:1px solid var(--border); color:var(--ink2); background:var(--page); white-space:nowrap }
.pill-state .dot { margin:0; width:8px; height:8px }
.pill-state.run { color:var(--ink); border-color:var(--strong-border) } .pill-state.run .dot { background:var(--equip) }
.pill-state.idle .dot { background:transparent; border:1.5px solid var(--muted) }
.pill-state.crit { color:var(--crit); border-color:color-mix(in srgb, var(--crit) 45%, var(--border)) } .pill-state.crit .dot { background:var(--crit) }
.pill-state.lost { color:var(--crit); border-style:dashed } .pill-state.lost .dot { background:transparent; border:1.5px solid var(--crit) }
.alarmcount { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; text-decoration:none; padding:3px 10px 3px 4px; border-radius:999px; background:var(--raise) }
.q { display:inline-block; font-size:12px; font-weight:620; padding:1px 8px; border-radius:999px; border:1px solid var(--border); margin-right:4px }
.q.good { color:var(--ink2) } .q.invalid { color:var(--crit) } .q.stale { color:var(--warntext); border-color:var(--warn) } .q.bad { color:var(--crit); border-color:color-mix(in srgb, var(--crit) 50%, var(--border)) }
.q.alarm { color:var(--crit); border-color:transparent; padding-left:0 }
:root[data-theme="dark"] .q.stale { color:var(--warn) }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .q.stale { color:var(--warn) } }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:200; display:flex; align-items:center; gap:12px; width:max-content;
  background:var(--ink); color:var(--surface); padding:10px 12px 10px 16px; border-radius:10px; box-shadow:0 8px 28px rgb(0 0 0 / .25); max-width:calc(100vw - 24px) }
.toast button { background:transparent; color:var(--surface); border-color:color-mix(in srgb, var(--surface) 40%, transparent); min-height:30px }
@media (max-width:760px) { .toast { bottom:calc(84px + env(safe-area-inset-bottom)) } }
.popmenu { position:fixed; z-index:150; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:0 10px 30px rgb(0 0 0 / .18);
  padding:5px; min-width:180px; display:flex; flex-direction:column }
.popmenu button { border:0; justify-content:flex-start; background:none; min-height:34px; border-radius:6px }
.popmenu button:hover { background:var(--raise) }
.menulabel { font-size:11.5px; color:var(--muted); padding:6px 10px 2px; font-weight:600; letter-spacing:.02em }

/* tables */
.listtable { overflow:auto }
table { border-collapse:collapse; width:100%; font-size:13px }
th, td { padding:8px 12px; text-align:left; border-bottom:1px solid var(--border); vertical-align:middle }
th { position:sticky; top:0; background:var(--surface); color:var(--muted); font-weight:600; font-size:12px; z-index:1; white-space:nowrap }
td.r, th.r { text-align:right } tr:last-child td { border-bottom:0 }
td .sub { color:var(--muted); font-size:12px }
tr.grouprow td { background:var(--page); color:var(--ink2); font-weight:620; font-size:12.5px; padding-top:10px }
tr.off td { color:var(--muted) }
tr.clickable { cursor:pointer } tr.clickable:hover td { background:var(--raise) }
td.spark canvas { width:90px; height:22px; display:block }
.state { font-size:12.5px; font-weight:600 }
.state.abnormal { color:var(--crit) } .state.returned { color:var(--ink2) } .state.shelved { color:var(--warntext) } .state.off { color:var(--muted) } .state.normal { color:var(--ink2); font-weight:500 }
@media (max-width:760px) { .hide-s { display:none } th, td { padding:8px 10px } }

/* forms and dialogs */
.form { display:grid; gap:12px } .form > p { margin:0 }
.field { display:grid; gap:4px; align-content:start; font-size:12.5px; color:var(--ink2) }   /* in a row beside a taller field: its box stays at the top, its own height */
.field > input, .field > select, .field > textarea { color:var(--ink); font-size:14px; width:100% }
.field small { color:var(--muted); font-size:12px }
.row { display:flex; gap:10px; flex-wrap:wrap } .row > * { flex:1 1 150px } .row.left > * { flex:none }
.check { display:flex; gap:8px; align-items:center }
.check input { min-height:auto; width:18px; height:18px; flex:none }
dialog { border:1px solid var(--border); border-radius:14px; background:var(--surface); color:var(--ink); padding:0;
  width:min(580px, calc(100vw - 24px)); max-height:calc(100dvh - 24px); box-shadow:0 20px 60px rgb(0 0 0 / .3) }
dialog::backdrop { background:rgb(0 0 0 / .38) }
dialog form { display:flex; flex-direction:column; max-height:calc(100dvh - 26px) }
dialog header { padding:16px 18px 12px; font-weight:650; font-size:16px; border-bottom:1px solid var(--border) }
dialog .dbody { padding:16px 18px; overflow:auto; display:grid; grid-template-columns:minmax(0, 1fr); gap:14px }     /* never wider than the dialog: what is in it wraps or is cut, the body does not scroll sideways */
dialog .dbody:focus { outline:none }
dialog .dbody > p, dialog .dbody > ul { margin:0 }   /* the body's gap spaces them; a paragraph's own margins only add a blank band */
dialog footer { padding:12px 18px 16px; display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; border-top:1px solid var(--border) }
dialog footer .left { margin-right:auto } dialog footer > button { max-width:100%; white-space:normal; text-align:center; padding-block:6px }          /* a long label wraps inside the dialog, never past its edge */
.guidance { background:var(--raise); border-radius:8px; padding:10px 12px } .guidance p { margin:4px 0 0; color:var(--ink2) }
.types { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:8px }
.types button { height:auto; padding:12px; text-align:left; white-space:normal; display:grid; gap:2px; justify-content:stretch; align-content:start }
.types button b { font-weight:620 } .types button span { color:var(--ink2); font-size:12.5px }
.picker { border:1px solid var(--border); border-radius:10px; max-height:320px; overflow:auto }
.picker .grp { position:sticky; top:0; background:var(--raise); padding:6px 10px; font-size:12px; font-weight:650; color:var(--ink2); z-index:1 }
.picker .opt { display:flex; align-items:center; gap:10px; padding:6px 10px; border-top:1px solid var(--border) }
.picker .opt label { display:flex; align-items:center; gap:8px; flex:1; font-size:13px; min-width:0 }
.picker .opt label span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.picker .opt label small { color:var(--muted); margin-left:auto; white-space:nowrap }
.picker .opt input[type=checkbox] { width:18px; height:18px; min-height:auto; flex:none }
.picker .opt select { min-height:30px; padding:0 6px; font-size:12.5px }

/* command search */
.palette { width:min(640px, calc(100vw - 24px)); margin-top:12vh; padding:0 }
.palette input { width:100%; border:0; border-bottom:1px solid var(--border); border-radius:0; min-height:52px; font-size:16px; padding:0 18px; background:transparent }
.palette input:focus { outline:none }
.plist { max-height:min(60vh, 520px); overflow:auto; padding:6px }
.prow { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; cursor:pointer }
.prow.on { background:var(--raise) }
.prow .pl { font-weight:560 } .prow .ph { color:var(--muted); font-size:12.5px } .prow .pk { margin-left:auto; color:var(--muted); font-size:12px }

/* ---------------------------------------------------------------- Overview */
.overview { display:flex; flex-direction:column; gap:20px }
.summary { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px }
.sum { display:flex; flex-direction:column; gap:1px; padding:12px 16px; border:1px solid var(--border); border-radius:12px; background:var(--surface); text-decoration:none; box-shadow:var(--shadow) }
.sum .sl { font-size:12.5px; color:var(--ink2) } .sum .sv { font-size:22px; font-weight:650; letter-spacing:-.01em } .sum .sx { font-size:12px; color:var(--muted) }
a.sum:hover { border-color:var(--strong-border) }
@media (max-width:900px) { .summary { grid-template-columns:repeat(2, minmax(0, 1fr)) } }
.site { display:flex; flex-direction:column; gap:10px }
.sitehead { display:flex; align-items:baseline; gap:12px; padding:0 2px }
.sitehead h1 { font-size:18px }
.sitestate { font-size:12.5px; font-weight:600 } .sitestate.good { color:var(--ink2) } .sitestate.crit { color:var(--crit) }
.sitegrid { display:grid; gap:12px; grid-template-columns:minmax(0, 1fr) }
@media (min-width:1500px) { .sitegrid.two { grid-template-columns:repeat(2, minmax(0, 1fr)) } }
.cardtitle { display:flex; align-items:center; gap:8px; text-decoration:none }
.cardtitle .go { color:var(--muted); font-size:20px; line-height:1 }
.cardtitle:hover h2 { text-decoration:underline; text-underline-offset:3px }
.mixercard { container-type:inline-size }
.cardbody { display:grid; grid-template-columns:minmax(0, 1.7fr) minmax(220px, 1fr); gap:6px 16px; padding:6px 16px 10px; align-items:start }
@container (max-width:900px) { .cardbody { grid-template-columns:minmax(0, 1fr) } }     /* beside its figures only while the drawing keeps readable words */
.diagram .mimic.compact { display:none }
.diagram { min-width:0; container-type:inline-size }
/* the full drawing only while its words stay readable (12 of its 720 units wide at 630 px or more) */
@container (max-width:630px) { .diagram .mimic.full { display:none } .diagram .mimic.compact { display:block; max-width:440px; margin:0 auto } }
.figures { display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; padding-top:10px }
.figure { display:flex; flex-direction:column; gap:0; min-width:0 }
.figure .fl { font-size:12.5px; color:var(--ink2) }
.figure .fv { font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.figure.hero .fv { font-size:30px; font-weight:650; letter-spacing:-.02em; line-height:1.15 }
.figure .fv small { font-size:14px; color:var(--muted); font-weight:450; margin-left:4px; letter-spacing:0 }
.figure canvas { width:100%; height:40px; display:block; margin-top:4px }
.figure.trace { grid-column:1 / -1; border-top:1px solid var(--border); padding-top:8px; margin-top:2px }
.figure.trace canvas { height:56px }
.progress { grid-column:1 / -1; display:grid; gap:5px; padding:8px 0 4px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin:2px 0 4px }
.progress .pl { display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink2) }
.progress .pv { color:var(--ink); font-weight:620 }
.progress .bar { height:8px; border-radius:99px; background:var(--sunk); overflow:hidden }
.progress .barfill { height:100%; background:var(--equip-off); border-radius:99px; transition:width .6s ease }
.progress.running .barfill { background:var(--equip) }
.cardfoot { display:flex; gap:10px 16px; flex-wrap:wrap; align-items:center; padding:10px 16px 14px; border-top:1px solid var(--border) }
.motors { display:flex; gap:8px; flex-wrap:wrap; flex:1 }
.motor-tile { display:flex; align-items:center; gap:8px; padding:5px 10px 5px 6px; border:1px solid var(--border); border-radius:10px; min-width:160px; background:var(--page) }
.motor-tile.fault { border-color:var(--crit) } .motor-tile.unknown { border-style:dashed; color:var(--muted) }
.motor-icon { width:28px; height:28px; flex:none }
.motor-icon .motor { fill:var(--surface); stroke:var(--equip-off); stroke-width:2 }
.motor-icon .motor.run { fill:var(--equip); stroke:var(--equip) }
.motor-icon .motor.fault { stroke:var(--crit); stroke-width:3 }
.motor-icon .motorM { font:700 12px system-ui, sans-serif; fill:var(--equip-off); text-anchor:middle }
.motor-icon .motorM.run { fill:var(--surface) }
.mt-name { font-size:12.5px; font-weight:620 } .mt-state { font-size:12px; color:var(--ink2); white-space:nowrap }
.motor-tile.fault .mt-state { color:var(--crit); font-weight:620 }
.safety { display:flex; gap:6px; flex-wrap:wrap }
.linecard .linefigs { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px 24px; padding:14px 16px 16px }

/* the process graphic */
.mimic { width:100%; height:auto; display:block; font-family:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow:visible }
.mimic text { fill:var(--ink2); font-size:13px }
.mimic .label { fill:var(--ink); font-size:13px; font-weight:620 }
.mimic .small { font-size:12px; fill:var(--ink2) }
.mimic .value { fill:var(--ink); font-size:17px; font-weight:650; font-variant-numeric:tabular-nums }
.mimic .mid { text-anchor:middle } .mimic .end { text-anchor:end } .mimic .strong { font-weight:650; fill:var(--ink) }
.mimic .ghost { fill:var(--muted) }
.mimic .alarmtext { fill:var(--crit) !important; font-weight:650 }
.mimic .vessel { fill:var(--sunk); stroke:var(--base); stroke-width:1.5 }
.mimic .pipe { fill:none; stroke:var(--base); stroke-width:6; stroke-linecap:round; stroke-linejoin:round }
.mimic .pipe.active, .mimic .pipe.chosen { stroke:var(--equip-off) }
.mimic .pipe.leg.chosen { stroke:var(--equip) }
.mimic .flow { fill:none; stroke:var(--surface); stroke-width:2; stroke-dasharray:3 9; opacity:0 }
.mimic .flow.moving { opacity:1; animation:flow 0.9s linear infinite }
@keyframes flow { to { stroke-dashoffset:-12 } }
.mimic .flag { fill:var(--surface); stroke:var(--base); stroke-width:1.5 }
.mimic .flag.on { fill:var(--equip); stroke:var(--equip) }
.mimic .lamp { fill:var(--surface); stroke:var(--base); stroke-width:1.5 }
.mimic .lamp.alarm { fill:var(--crit); stroke:var(--crit) }
.mimic .lamp.unknown { stroke-dasharray:2 2 }
.mimic .lid { fill:var(--surface); stroke:var(--base); stroke-width:1.5 }
.mimic .lid.on { fill:var(--equip-off); stroke:var(--equip-off) }
.mimic .shaft { stroke:var(--base); stroke-width:3 }
.mimic .ribbon { fill:none; stroke:var(--equip-off); stroke-width:3; stroke-linecap:round; stroke-dasharray:10 6 }
.mimic .ribbon.turning { stroke:var(--equip); animation:turn 0.8s linear infinite }
@keyframes turn { to { stroke-dashoffset:-32 } }
.mimic .motor { fill:var(--surface); stroke:var(--equip-off); stroke-width:2 }
.mimic .motor.run { fill:var(--equip); stroke:var(--equip) }
.mimic .motor.fault { fill:var(--surface); stroke:var(--crit); stroke-width:3 }
.mimic .motorM { font-size:14px; font-weight:700; fill:var(--equip-off) }
.mimic .motorM.run { fill:var(--surface) }
.mimic .faultmark { fill:var(--crit); font-weight:700; font-size:13px }
.mimic .track { fill:var(--sunk) }
.mimic .fill { fill:var(--equip) } .mimic .fill.warn { fill:var(--warn) }
.mimic .tick { stroke:var(--ink2); stroke-width:2 } .mimic .tick.warnline { stroke:var(--warn); stroke-width:2.5 }
.mimic .display { fill:var(--surface); stroke:var(--base); stroke-width:1.5 }
.mimic .cell { fill:var(--base) } .mimic .wire { fill:none; stroke:var(--base); stroke-width:1.5; stroke-dasharray:3 3 }
.mimic .valve { fill:var(--surface); stroke:var(--equip-off); stroke-width:2; stroke-linejoin:round }
.mimic .valve.open { fill:var(--equip); stroke:var(--equip) }
.mimic .valve.fault { stroke:var(--crit); stroke-width:3 }
.mimic .dest { fill:var(--surface); stroke:var(--base); stroke-width:1.5 }
.mimic .dest.chosen { stroke:var(--equip); stroke-width:2 }
.mimic .dest.run { fill:var(--raise) }
.mimic .hatchline { stroke:var(--base); stroke-width:2 }
.mimic .lostfill { opacity:.55 }
.mimic .lostbox { fill:var(--surface); stroke:var(--crit); stroke-width:1.5; stroke-dasharray:5 4 }
.mimic.lost .lostcover text.label { fill:var(--crit) }
.mimic.lost > g:not(.lostcover), .mimic.lost > path { opacity:.35 }
@media (prefers-reduced-motion: reduce) { .mimic .flow.moving, .mimic .ribbon.turning { animation:none } }

/* a PLC's page */
.crumbs { display:flex; gap:8px; align-items:center; color:var(--muted); font-size:13px; margin:2px 2px 10px }
.crumbs a { color:var(--ink2); text-decoration:none } .crumbs a:hover { text-decoration:underline }
.plcpage { display:flex; flex-direction:column; gap:12px }
.plcpage .mixercard.big .cardhead h2 { font-size:18px }
.meta { color:var(--muted); font-size:12.5px; margin:-4px 4px 0 }
.trendgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(420px, 1fr)); gap:0 }
@media (max-width:760px) { .trendgrid { grid-template-columns:1fr } }
.trend { padding:10px 12px 8px; border-top:1px solid var(--border); min-width:0 }
.trend.lanes { grid-column:1 / -1 }
.trendhead, .historyhead { display:flex; align-items:baseline; gap:6px 14px; flex-wrap:wrap; padding:2px 4px 4px }
.trendhead h3 { display:flex; gap:6px; align-items:baseline; white-space:nowrap }
.trendhead .unit, .whead .unit { color:var(--muted); font-weight:400; font-size:12px }
.trendbody { position:relative; height:220px }
.trend.lanes .trendbody { height:230px }
.groups { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:0 }
/* one group alone (a PLC with no groups) uses the card's width, its readings in columns, not one column in a third of it */
.group:only-child { grid-column:1 / -1; column-width:300px; column-gap:32px; border-right:0 } .group:only-child h3 { column-span:all }
.group:only-child .rrow { break-inside:avoid } @media (min-width:761px) { .group:only-child .rrow { border-top:0 } }          /* no rules between rows in columns: a column would start under one */
.group { padding:10px 16px 12px; border-top:1px solid var(--border); border-right:1px solid var(--border) }
.group h3 { font-size:12.5px; color:var(--muted); font-weight:620; margin:2px 0 6px; letter-spacing:.01em }
.rrow { display:grid; grid-template-columns:minmax(0, 1fr) auto 80px; gap:10px; align-items:center; padding:5px 0; text-decoration:none; min-height:32px;
  border-top:1px solid color-mix(in srgb, var(--border) 60%, transparent) }
.rrow:first-of-type { border-top:0 }
.rrow:hover .rn { color:var(--ink); text-decoration:underline; text-underline-offset:3px }
.rrow .rn { color:var(--ink2); font-size:13px; overflow-wrap:anywhere; line-height:1.3 }
.rrow .rv { font-weight:620; font-size:13.5px; text-align:right; white-space:nowrap }
.rrow canvas { width:80px; height:24px; display:block }
.rrow.stale .rv { color:var(--muted) }
.rrow.alarmed .rn { color:var(--crit) } .rrow.alarmed .rn::before { content:"◆ " }
.twocol { display:grid; grid-template-columns:repeat(auto-fit, minmax(460px, 1fr)); gap:12px; align-items:start }
table.num td, table.num th { white-space:nowrap }
@media (max-width:760px) { .twocol { grid-template-columns:1fr } .groups { grid-template-columns:1fr } .group { border-right:0 } }

/* ---------------------------------------------------------------- charts */
.timectl { display:flex; gap:8px; align-items:center; flex-wrap:wrap }
@media (max-width:760px) { .trends .timectl .seg.ranges { flex:1 1 100% } .trends .timectl .seg.ranges button { padding:0 4px } }   /* an equipment page's ranges all in sight on a phone */
.live { display:inline-flex; align-items:center; gap:7px }
.live .dot { margin:0; width:8px; height:8px; background:var(--muted) }
.live[aria-pressed="true"] .dot { background:var(--good); box-shadow:0 0 0 3px color-mix(in srgb, var(--good) 25%, transparent) }
.rangetext { color:var(--ink2); font-size:12.5px }
.legend { display:flex; gap:2px 12px; flex-wrap:wrap; font-size:12.5px; color:var(--ink2); min-width:0 }
.li { display:inline-flex; align-items:baseline; gap:5px; white-space:nowrap }
.li b { color:var(--ink); font-weight:620; font-size:13px }
.key { width:14px; height:0; border-top:2px solid var(--c); align-self:center; flex:none }
.key.ref { border-top-style:dashed; border-top-width:1.5px } .key.ref.warning { border-top-style:dotted; border-top-width:2px }
.legend .stamp { color:var(--muted); flex-basis:100%; order:-1 }
.key.sq { width:10px; height:10px; border:0; background:var(--c); border-radius:2px }
.big { font-size:17px !important }
.plot { position:absolute; inset:0 }
.plot canvas { position:absolute; left:0; top:0; width:100%; height:100%; display:block }
.plot canvas.over { touch-action:pan-y; cursor:crosshair; -webkit-tap-highlight-color:transparent }
.tip { position:absolute; top:6px; z-index:3; pointer-events:none; background:var(--surface); border:1px solid var(--border);
  border-radius:8px; box-shadow:0 4px 16px rgb(0 0 0 / .14); padding:7px 10px; font-size:12.5px; min-width:150px; max-width:300px }
.tip .t { color:var(--ink2); margin-bottom:4px; white-space:nowrap }
.tip .r { display:flex; align-items:baseline; gap:7px; white-space:nowrap; line-height:1.65 }
.tip .r b { font-weight:650; min-width:44px; text-align:right }
.tip .r .n { color:var(--ink2) } .tip .r .x { color:var(--muted); font-size:11.5px }
.tip .r .n { min-width:0; overflow:hidden; text-overflow:ellipsis } .tip .r > :not(.n) { flex:none }   /* a long name is cut, its value and range stay inside the box */
.tablewrap { position:absolute; inset:0; display:flex; flex-direction:column; gap:6px }
.tablewrap .scroll { flex:1; min-height:0; overflow:auto; border:1px solid var(--border); border-radius:8px }
.tablewrap td, .tablewrap th { text-align:right; padding:5px 10px } .tablewrap td:first-child, .tablewrap th:first-child { text-align:left; color:var(--ink2) }
.tablebar { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px }
.tablebar button { margin-left:auto; min-height:28px }
canvas.bars { width:calc(100% - 16px); height:200px; display:block; margin:8px }
.kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px }
@media (max-width:560px) { .kpis { grid-template-columns:repeat(2, minmax(0, 1fr)) } .kpi .kv { font-size:21px } .kpi { padding:10px 12px } }
.kpi { display:flex; flex-direction:column; padding:12px 16px; border:1px solid var(--border); border-radius:12px; background:var(--surface); box-shadow:var(--shadow) }
.kpi .kl { font-size:12.5px; color:var(--ink2) } .kpi .kv { font-size:24px; font-weight:650; letter-spacing:-.01em } .kpi .kn { font-size:12px; color:var(--muted) }
.barcell { width:30% } .hbar { display:block; height:8px; border-radius:99px; background:var(--ink2); opacity:.55 }

/* ---------------------------------------------------------------- dashboards */
.toolbar { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; padding:0 0 12px; position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--page) 92%, transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px) }
.toolbar .tabs { flex:0 1 auto }
.editbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; width:100%; padding:10px 12px; border:1px dashed var(--strong-border); border-radius:12px; background:var(--surface) }
.editbar input { width:220px }
.editbar .note { flex-basis:100%; background:none; padding:0 }
.grid { position:relative; min-height:200px }
.widget { position:absolute; display:flex; flex-direction:column; overflow:hidden; background:var(--surface); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow); transition:left .18s ease, top .18s ease, width .18s ease, height .18s ease }
.grid.still .widget { transition:none }
.widget.lifted { transition:none; z-index:10; box-shadow:0 14px 36px rgb(0 0 0 / .24); opacity:.95; cursor:grabbing }
.ghost { position:absolute; border:2px dashed var(--accent); border-radius:12px; background:color-mix(in srgb, var(--accent) 8%, transparent); pointer-events:none;
  transition:left .12s, top .12s, width .12s, height .12s }
.whead { display:flex; align-items:baseline; gap:4px 12px; flex-wrap:wrap; padding:10px 10px 2px 14px; min-height:40px }
.whead h3 { display:flex; gap:6px; align-items:baseline; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100% }
.wtools { margin-left:auto; display:flex; gap:2px; align-self:center }
.wbtn { min-height:28px; height:28px; width:30px; padding:0; border-color:transparent; background:transparent; color:var(--muted) }
.wbtn:hover { color:var(--ink); background:var(--raise) }
.wbtn[aria-pressed="true"] { color:var(--ink); background:var(--raise) }
.wbtn .i { width:16px; height:16px }
.wbody { flex:1; min-height:0; position:relative; margin:0 8px 8px }
.editing .widget { cursor:grab; outline:1px dashed var(--strong-border); outline-offset:-1px; user-select:none; -webkit-user-select:none; touch-action:none }
.editing .wbody { pointer-events:none }
.editing .wbtn.menu { color:var(--ink); background:var(--raise) }
@media (max-width:760px) {
  .toolbar { position:static; background:none; backdrop-filter:none; -webkit-backdrop-filter:none }
  .toolbar .tabs { flex:1 1 100% }
  .timectl { width:100% } .timectl .seg.ranges { flex:1 } .timectl .seg.ranges button { flex:1 }
}
.grid.flow { display:grid; grid-template-columns:1fr; gap:12px; height:auto !important }
.grid.flow.two { grid-template-columns:1fr 1fr }
.grid.flow .widget { position:relative; left:auto !important; top:auto !important; width:auto !important; transition:none; min-width:0 }
.grid.flow .widget.auto .wbody { flex:none } .grid.flow .widget.auto .scrollbody { position:static; max-height:none }
.editing .grid.flow .widget, .grid.flow.editing .widget { cursor:default; touch-action:auto }
.value { position:absolute; inset:0; padding:2px 6px 4px; display:flex; flex-direction:column; justify-content:space-between; gap:6px }
.value .v { font-size:clamp(26px, 3.2vw, 40px); font-weight:650; letter-spacing:-.02em; line-height:1.1 }
.value .v small { font-size:.45em; color:var(--muted); font-weight:450; margin-left:4px; letter-spacing:0 }
.value .sub { color:var(--ink2); font-size:12.5px; display:flex; gap:6px; align-items:center }
.value canvas { width:100%; height:40px; display:block; flex:none }
.value.stale .v { color:var(--muted) }
.procbox { position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; container-type:size }
.procbox .mimic { max-height:100%; width:auto; max-width:100% }
.procbox .mimic.compact { display:none }
.procbox.small .mimic.full { display:none } .procbox.small .mimic.compact { display:block }
.scrollbody { position:absolute; inset:0; overflow:auto; scrollbar-width:thin }
.wgroup { font-size:12px; color:var(--muted); font-weight:620; padding:8px 6px 2px }
.scrollbody .rrow { padding:4px 6px }
.plcstate { font-size:12.5px; color:var(--ink2); display:inline-flex; gap:5px; align-items:center; white-space:nowrap }
.ev { display:grid; grid-template-columns:92px minmax(0,1fr); gap:1px 10px; padding:7px 6px; border-top:1px solid var(--border); font-size:12.5px }
.ev:first-child { border-top:0 }
.ev .at { color:var(--muted) } .ev .who { overflow-wrap:break-word; min-width:0 } .ev .what { grid-column:2; color:var(--ink2) }
@container (max-width:360px) { .ev { grid-template-columns:minmax(0,1fr) } .ev .what { grid-column:1 } }
.scrollbody > a.more { display:block; padding:10px 6px 4px; font-size:13px; color:var(--ink2); text-underline-offset:3px }

/* ---------------------------------------------------------------- alarms */
.list { overflow:visible }
.alarm { display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:2px 12px; align-items:start; padding:12px 14px; border-top:1px solid var(--border) }
.alarm:first-child { border-top:0 }
.alarm > .ic { margin-top:1px }
.alarm .what { min-width:0 } .alarm .what b { font-weight:620 }
.alarm .what > div { color:var(--ink2); font-size:12.5px }
.alarm .acts { display:flex; gap:6px; align-items:center }
.alarm .when { color:var(--ink2); font-size:12.5px; white-space:nowrap; margin-right:4px }
.alarm.returned .what b, .alarm.shelved .what b { font-weight:500; color:var(--ink2) }
.alarm.acked { background:color-mix(in srgb, var(--raise) 50%, transparent) }
.guide summary { cursor:pointer; color:var(--ink2); font-size:12.5px; margin-top:4px; text-decoration:underline; text-underline-offset:3px; width:max-content }
.guide p { margin:6px 0 2px; font-size:13px; color:var(--ink); max-width:70ch }
@media (max-width:560px) {
  .alarm { grid-template-columns:22px minmax(0,1fr) }
  .alarm .acts { grid-column:2; margin-top:6px }
  .alarm .acts .when { margin-right:auto }
}
.allclear { display:flex; gap:14px; align-items:center; padding:26px 20px }
.allclear p { margin:2px 0 0; color:var(--ink2) }
.shelvedlist { margin-top:12px } .shelvedlist > summary { padding:12px 16px; cursor:pointer; color:var(--ink2); font-weight:600 }
/* callouts: who is being reached about an alarm, and how each step went */
.calloutline, .alarm .what > .calloutline { color:var(--ink); font-size:12.5px; margin-top:2px }
.callouts { display:grid; gap:12px } .calloutwarn { display:grid; gap:8px } .calloutwarn:empty { display:none }
.perf > * + * { margin-top:12px }   /* Alarms, Performance: its figures and cards apart */
.timeline { list-style:none; margin:6px 0 2px; padding:0 0 0 2px; display:grid; gap:3px; font-size:12.5px; color:var(--ink2) }
.timeline li { display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:8px; padding-left:10px; border-left:2px solid var(--border) }
.timeline .at { color:var(--muted); white-space:nowrap; min-width:68px } .timeline b { color:var(--ink); font-weight:600 } .timeline .sub { color:var(--muted) }
.timeline li.trouble { border-left-color:var(--warn) } .timeline li.trouble > span:last-child { color:var(--warntext) }
.timeline li.done { border-left-color:var(--equip) } .timeline li.done > span:last-child { color:var(--ink); font-weight:600 }
dialog .timeline { margin:0 }
.memberlist { display:grid; gap:6px }
.member { display:grid; grid-template-columns:22px minmax(0, 1fr) 170px repeat(3, 34px); gap:6px; align-items:center;
  padding:6px 6px 6px 10px; border:1px solid var(--border); border-radius:8px; background:var(--page) }
.member .n { color:var(--muted); font-size:12.5px }
.member .who { min-width:0 } .member .who b { display:block; font-weight:600; color:var(--ink); font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.member .who small { color:var(--muted); font-size:12px }
.member select { min-height:32px; width:100% }
@media (max-width:560px) { .member { grid-template-columns:22px minmax(0, 1fr) repeat(3, 34px) } .member select { grid-column:2 / -1; grid-row:2 } }
.personcallouts { display:grid; gap:12px }
.listpick { display:grid; gap:6px; color:var(--ink) ; font-size:13.5px }
.listpick > small { color:var(--muted); font-size:12px }
.listpick .pick { display:grid; grid-template-columns:minmax(0, 1fr) 170px; gap:6px 10px; align-items:center; min-height:46px;
  padding:6px 6px 6px 10px; border:1px solid var(--border); border-radius:8px; background:var(--page) }
.listpick .pick.on { border-color:var(--ink2) }
.listpick .pick .check { min-width:0; cursor:pointer } .listpick .pick .check > span { min-width:0 }
.listpick .pick b { display:block; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.listpick .pick small { display:block; color:var(--muted); font-size:12px }
.listpick .pick select { min-height:32px; width:100% }
@media (max-width:560px) { .listpick .pick { grid-template-columns:minmax(0, 1fr) } }
td.acts { white-space:nowrap }

/* ---------------------------------------------------------------- history */
.historypage { display:grid; grid-template-columns:280px minmax(0, 1fr); gap:14px; align-items:start }
.picker-side { position:sticky; top:72px; max-height:calc(100dvh - 88px); display:flex; flex-direction:column; gap:8px; background:var(--surface);
  border:1px solid var(--border); border-radius:12px; padding:12px; box-shadow:var(--shadow) }   /* sticks below the top bar, as the alarm list */
.picker-side.indialog { position:static; max-height:none; border:0; padding:0; box-shadow:none }
.sidehead { display:flex; align-items:center; justify-content:space-between }
.pick { overflow:auto; min-height:0 }
.pick details { border-top:1px solid var(--border); padding:4px 0 } .pick details:first-child { border-top:0 }
.pick summary { cursor:pointer; font-weight:620; padding:6px 4px; display:flex; gap:8px; align-items:center }
.pick summary .count { margin-left:auto; color:var(--muted); font-weight:500; font-size:12px }
.pgroup { font-size:11.5px; color:var(--muted); font-weight:620; padding:6px 6px 2px; letter-spacing:.02em }
.prow2 { display:flex; align-items:center; gap:8px; padding:4px 6px; border-radius:6px; font-size:13px; cursor:pointer }
.prow2:hover { background:var(--raise) }
.prow2 input { width:16px; height:16px; min-height:auto; flex:none }
.prow2 span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .prow2 small { color:var(--muted) }
.history-main { display:flex; flex-direction:column; gap:10px; min-width:0 }
.historyhead { padding:0; align-items:center }
@media (max-width:760px) { .historyhead .timectl .seg.ranges { flex:1 1 100% } .historyhead .timectl .seg.ranges button { padding:0 4px } }   /* every range in sight on a phone */
.custom { display:flex; gap:8px; align-items:center; flex-wrap:wrap; color:var(--ink2); font-size:13px }
.custom input { min-height:32px }
.historycharts { display:flex; flex-direction:column; gap:10px }
.hchart { padding:10px 12px 10px }
.hchart .trendhead { position:relative; padding-right:36px } .hchart .trendhead > .wbtn { position:absolute; top:0; right:0 }   /* the table button in the corner, never a row of its own */
.hchart .trendbody { height:260px }
/* a chart shown as a table: as tall as its rows need, up to most of the window, scrolling inside */
.trendbody.astable { height:auto !important; max-height:min(70vh, 720px); overflow:hidden; display:flex; flex-direction:column }
.trendbody.astable .tablewrap { position:static; flex:1; min-height:0; display:flex; flex-direction:column }
.trendbody.astable .tablewrap .scroll { flex:1; min-height:0; overflow:auto }
.narrow-only { display:none !important }
@media (max-width:1000px) { .historypage { grid-template-columns:1fr } .historypage > .picker-side { display:none } .narrow-only { display:inline-flex !important } }

/* ---------------------------------------------------------------- reports and system */
.healthgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:12px; margin-bottom:12px }
.healthgrid .listtable :is(th, td):first-child { padding-left:16px } .healthgrid .listtable :is(th, td):last-child { padding-right:16px }          /* in line with the facts above */
.facts { display:grid; grid-template-columns:max-content 1fr; gap:6px 16px; margin:0; padding:12px 16px }
.facts dt { color:var(--ink2); font-size:13px } .facts dd { margin:0; font-size:13px }
.keys .facts { padding:8px 0 0 }
.phone .phonerow { display:flex; gap:20px; align-items:flex-start; margin-top:12px }
.phone .qr { flex:none; width:148px; height:148px; border-radius:8px; overflow:hidden; border:1px solid var(--border) }
.phone .qr svg { display:block; width:100%; height:100% }
.phone p { margin:0 0 8px; font-size:14px } .phone .steps { margin:0 0 10px; padding-left:18px; font-size:14px } .phone .steps li { margin:4px 0 }
.phone .url { color:var(--muted); font-size:13px; overflow-wrap:anywhere; margin:0 }
@media (max-width:600px) { .phone .phonerow { flex-direction:column } }
.batchlist > summary { padding:12px 16px; cursor:pointer; font-weight:620 }
.printonly { display:none }
@media print { .hud { display:none !important } }   /* the top bar is the screen's, not the printed report's */
@media print {
  .rail, .phonebar, .bottomnav, #strip, .noprint, .pagehead button, .toast { display:none !important }
  .content { margin:0; padding:0 } .printonly { display:block }
  .card, .kpi { box-shadow:none; break-inside:avoid } .batchlist[open] { break-before:page }
  body { background:#fff }
}

/* ---------------------------------------------------------------- sign in */
.loginwrap { min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:20px }
.loginbrand { display:flex; align-items:center; gap:10px; font-size:17px }
.loginbrand .mark { width:30px; height:30px; color:var(--ink) } .loginbrand span { color:var(--muted); font-size:14px }
.login { width:min(400px, 100%); padding:24px }
.login h1 { margin:0 0 4px } .login p { color:var(--ink2); margin:0 0 16px }
.login input.code { font-size:26px; letter-spacing:.3em; text-indent:.3em; text-align:center; font-variant-numeric:tabular-nums }
.login .form button { width:100% }
pre.report { font:13px/1.55 ui-monospace, Menlo, monospace; white-space:pre-wrap; margin:0; background:var(--raise); padding:12px 14px; border-radius:8px }
dialog:has(pre.report) { width:min(720px, calc(100vw - 24px)) }          /* room for the report's lines as they are emailed */

/* faceplates */
.mimic .hit { cursor:pointer; outline:none }
.mimic .hit:hover .vessel, .mimic .hit:focus-visible .vessel, .mimic .hit.dest:hover, .mimic .hit:hover .valve { stroke:var(--accent); stroke-width:2 }
.mimic .hit:focus-visible { outline:2px solid var(--accent) }
button.motor-tile { font:inherit; color:inherit; text-align:left; justify-content:flex-start; min-height:auto; cursor:pointer }
button.motor-tile:hover { border-color:var(--strong-border); background:var(--raise) }
.faceplate { width:min(560px, calc(100vw - 24px)) }
.faceplate[open] { display:flex; flex-direction:column } .faceplate .dbody { flex:1 1 auto; min-height:0 }     /* a long one scrolls its readings, its head and Close stay */
.faceplate header { display:block }
.fphead { display:flex; align-items:center; gap:12px }
.fphead > div { flex:1 } .fphead b { display:block; font-size:16px } .fphead small { color:var(--muted); font-weight:450; font-size:12.5px }
.fprows .rrow canvas { width:90px; height:26px }
.fprows .rrow { grid-template-columns:minmax(0, 1fr) auto 90px }
.fpalarms:empty { display:none }
.fpalarms { border:1px solid var(--border); border-radius:10px }
.faceplate footer { align-items:center }
.fpnote { margin-right:auto; color:var(--muted); font-size:12px; font-family:ui-monospace, Menlo, monospace }
a.button { display:inline-flex; align-items:center; min-height:34px; padding:0 12px; border:1px solid var(--border); border-radius:8px; text-decoration:none; background:var(--surface) }
a.button:hover { background:var(--raise) }

.chip.crit { color:var(--crit); border-color:color-mix(in srgb, var(--crit) 45%, var(--border)) } .chip.crit .d { background:var(--crit) }
@media (max-width:560px) { .summary { gap:8px } .sum { padding:9px 12px } .sum .sv { font-size:18px } .sum .sx:not(.keep) { display:none } }

.short { display:none }
@media (max-width:560px) {
  .alarm { grid-template-columns:22px minmax(0,1fr) auto }
  .alarm .acts { grid-column:auto; margin-top:0 }
  .alarm .acts .when { display:none }
  .long { display:none } .short { display:inline }
}
.list > .cardhead + .alarm { border-top:0 }
.page > .list + .list, #main .list + .list { margin-top:12px }
table.grouped th.span { text-align:center; color:var(--ink2); border-bottom:1px solid var(--border) }
@media (max-width:560px) { .report .pagebar .seg { flex:1 1 100% } .report .pagebar .seg button { flex:1; padding:0 4px } }   /* every range in sight on a phone */
table.grouped.narrow .hide-s { display:none }   /* Reports, By day on a tablet: as on a phone */
button.danger.quiet { border-color:transparent; background:transparent }
.warntext { color:var(--warntext); font-weight:600 }
@media (max-width:760px) { .bottomnav .badge { top:2px; left:calc(50% + 8px) } }

/* the logbook */
.composer { display:grid; gap:8px } .composer textarea { width:100%; font-size:14px }
.logdays { display:flex; flex-direction:column; gap:12px }
.entry { padding:10px 16px; border-top:1px solid var(--border) } .cardhead + .entry { border-top:0 }
.entryhead { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:13px } .entryhead > .num { white-space:nowrap }   /* a long name wraps the head, never breaking the time or pushing Remove out */
.entryhead .chip { min-height:22px; text-decoration:none }
.entry p { margin:4px 0 0; white-space:pre-wrap; max-width:80ch; overflow-wrap:anywhere }
.card .pad { padding:12px 16px; border-bottom:1px solid var(--border) }
.sum.wide { grid-column:1 / -1; border-color:color-mix(in srgb, var(--crit) 45%, var(--border)) } .sum.wide .sl { color:var(--crit); font-weight:620 }

.comparebody { position:relative; height:260px; margin:6px 10px 10px }
.comparebody canvas { position:absolute; inset:0; width:100%; height:100%; cursor:crosshair; touch-action:pan-y }
.key.sq.faint { opacity:.35 }
.compare .cmpnote { max-width:70ch; text-align:right }

/* maintenance */
.service { display:grid; gap:8px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--page) }
.servicehead { display:flex; flex-direction:column; gap:2px }
.crittext { color:var(--crit); font-weight:620 }
.motor-tile.due { border-color:var(--warn) } .motor-tile.due .mt-state { color:var(--warntext); font-weight:620 }

.lede { margin:-6px 0 12px; font-size:13px }
.switch { width:40px; min-height:22px; height:22px; padding:2px; border-radius:999px; background:var(--base); border:0; justify-content:flex-start }
.switch span { width:18px; height:18px; border-radius:50%; background:var(--surface); box-shadow:0 1px 2px rgb(0 0 0 / .2); transition:transform .15s }
.switch[aria-checked="true"] { background:var(--ink) } .switch[aria-checked="true"] span { transform:translateX(18px) }
.picker.tall { max-height:min(50vh, 420px) }
.picker .opt.done { opacity:.6 }
.picker .opt input[type=text] { min-height:28px; width:130px; padding:2px 8px; font-size:12.5px }
.picker .opt input[type=text]:last-child { width:64px }

/* ---------------------------------------------------------------- dashboards, one page */
.sublinks { display:flex; flex-direction:column; gap:1px; margin:0 0 4px 28px; border-left:1px solid var(--border); padding-left:6px }
.sublinks a, .sublinks button { display:flex; align-items:center; gap:6px; padding:5px 8px; border-radius:6px; text-decoration:none; color:var(--ink2); font-size:13px;
  border:0; background:none; min-height:auto; justify-content:flex-start; width:100%; white-space:nowrap; overflow:hidden }
.sublinks a span, .sublinks button span { overflow:hidden; text-overflow:ellipsis }
.sublinks a:hover, .sublinks button:hover { background:var(--raise); color:var(--ink) }
.sublinks a[aria-current="page"] { color:var(--ink); font-weight:620; background:var(--raise) }
.sublinks .addboard { color:var(--muted) } .sublinks .addboard .i { width:14px; height:14px }
.boardhead { display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap; margin:2px 0 14px }
.boardhead h1 { font-size:20px; min-width:0; overflow-wrap:anywhere }
.boardhead .editbar { flex-basis:100% }
.switchboard { color:var(--ink2) }
.typegroup { font-size:12px; font-weight:650; color:var(--muted); letter-spacing:.02em; margin:4px 0 -4px }

/* a widget's head: its title and tools on one line, its readout beneath */
.whead { display:flex; align-items:center; gap:2px 8px; flex-wrap:wrap; padding:8px 8px 2px 14px; min-height:40px }
.whead h3 { flex:1 1 0; min-width:0; overflow:hidden; text-overflow:ellipsis; display:block }     /* a long title is cut short, never pushing its tools onto a line of their own */
.whead h3 .unit { margin-left:6px }
.whead .legend { flex:1 1 100%; order:3; padding-bottom:2px }
.whead .legend:empty { display:none }
.wtools { margin-left:auto; display:flex; gap:2px; align-items:center; flex:none }
.rangepick { min-height:26px; height:26px; padding:0 22px 0 8px; font-size:12.5px; border-color:transparent; background-color:transparent; color:var(--ink2); cursor:pointer; field-sizing:content }
.rangepick:hover { background-color:var(--raise) }
.editing .rangepick { display:none }
.widget.bare .whead { position:absolute; right:0; top:0; z-index:2; min-height:0; padding:4px } .widget.bare .whead h3 { display:none }
.widget.bare .wbody { margin:8px }
@media (pointer:coarse) { .rangepick { min-height:36px; height:36px; font-size:16px } }

/* tooltips live above the page, so no widget can cut them off */
.tip.floating { position:fixed; z-index:300; top:0; left:0 }

.wcanvas { position:absolute; inset:0 } .wcanvas canvas { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:pan-y }

/* gauges */
.gaugebox { position:absolute; inset:0; display:grid; place-items:center }
.gauge { width:100%; height:100%; max-height:100% }
.gauge .gtrack { fill:none; stroke:var(--sunk); stroke-width:14; stroke-linecap:round }
.gauge .garc { fill:none; stroke:var(--equip); stroke-width:14; stroke-linecap:round; transition:d .4s }
.gauge .garc.over { stroke:var(--warn) }
.gauge .gband { fill:none; stroke-width:4; stroke:var(--warn); opacity:.55; transform:scale(1.13); transform-origin:100px 96px } .gauge .gband.critical { stroke:var(--crit) }
.gauge .gtick { stroke:var(--base); stroke-width:1.5 }
.gauge .gmark { stroke:var(--ink2); stroke-width:3 } .gauge .gmark.warning { stroke:var(--warn) } .gauge .gmark.critical { stroke:var(--crit) }
.gauge .gval { font:650 30px system-ui, sans-serif; fill:var(--ink); text-anchor:middle; font-variant-numeric:tabular-nums }
.gauge .gunit { font:13px system-ui, sans-serif; fill:var(--muted); text-anchor:middle }
.gauge .gend { font:11px system-ui, sans-serif; fill:var(--muted); text-anchor:middle; font-variant-numeric:tabular-nums }
.bargauges, .ontime { position:absolute; inset:0; overflow:auto; display:flex; flex-direction:column; gap:12px; padding:6px 6px 4px }
.widget.auto .ontime { position:static }
.bghead { display:flex; justify-content:space-between; gap:8px; font-size:13px; margin-bottom:4px }
.bgn { color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .bgv { font-weight:620; white-space:nowrap } .bgv small { color:var(--muted); font-weight:400 }
.bgtrack { position:relative; height:12px; border-radius:99px; background:var(--sunk) }
.bgfill { height:100%; border-radius:99px; transition:width .5s }
.bgrow.over .bgfill { box-shadow:inset 0 0 0 2px var(--warn) } .bgrow.stale { opacity:.5 }
.bgref { position:absolute; top:-3px; bottom:-3px; width:2px; margin-left:-1px; background:var(--ink2); border-radius:1px }
.bgref.warning { background:var(--warn) } .bgref.critical { background:var(--crit) }
.livetable td, .livetable th { padding:6px 8px } .livetable tr.stale td.strong { color:var(--muted) } .livetable tr.alarmed td:first-child span { color:var(--crit) }
@container (max-width:300px) { .hide-narrow { display:none } }
.widget { container-type:inline-size }

/* clocks */
.clockbox { position:absolute; inset:0; display:grid; place-items:center }
.aclock { width:100%; height:100%; max-width:100%; max-height:100% }
.aclock .face { fill:var(--surface); stroke:var(--border); stroke-width:2 }
.aclock .tick { stroke:var(--base); stroke-width:1.2 } .aclock .tick.big { stroke:var(--ink2); stroke-width:2.6 }
.aclock text.num { font:600 13px system-ui, sans-serif; fill:var(--ink2); text-anchor:middle }
.aclock text.zone { font:11px system-ui, sans-serif; fill:var(--muted); text-anchor:middle }
.aclock .hand { stroke-linecap:round } .aclock .hour { stroke:var(--ink); stroke-width:5 } .aclock .minute { stroke:var(--ink); stroke-width:3.2 }
.aclock .second { stroke:var(--crit); stroke-width:1.4 } .aclock .pin { fill:var(--crit) }
/* tasks on the dial: blue while there is time, amber within the hour, orange within a quarter of an hour, red when late */
.aclock .face { transition:fill .6s, stroke .6s }
.aclock.soon .face { stroke:var(--warn); stroke-width:4; fill:color-mix(in srgb, var(--warn) 9%, var(--surface)) }
.aclock.now .face { stroke:var(--serious); stroke-width:5; fill:color-mix(in srgb, var(--serious) 13%, var(--surface)) }
.aclock.late .face { stroke:var(--crit); stroke-width:5; fill:color-mix(in srgb, var(--crit) 13%, var(--surface)); animation:lateface 2s ease-in-out infinite }
@keyframes lateface { 50% { fill:color-mix(in srgb, var(--crit) 4%, var(--surface)) } }
@media (prefers-reduced-motion: reduce) { .aclock.late .face { animation:none } }
.aclock .taskmark { stroke:var(--surface); stroke-width:2; fill:var(--accent) }
.aclock .taskarc { fill:none; stroke:var(--accent); stroke-width:4; stroke-linecap:round; opacity:.75 }
.aclock .soon.taskmark { fill:var(--warn) } .aclock .soon.taskarc { stroke:var(--warn) }
.aclock .now.taskmark { fill:var(--serious) } .aclock .now.taskarc { stroke:var(--serious) }
.aclock .late.taskmark { fill:var(--crit) }
.aclock text.tasknext { font:600 10px system-ui, sans-serif; fill:var(--ink2); text-anchor:middle } .aclock text.tasknext.when { font-weight:500 }
.aclock text.tasknext.soon { fill:var(--warntext) } .aclock text.tasknext.now, .aclock text.tasknext.late { fill:var(--crit) }
.duechip.time { padding-left:8px }
.timeedit { height:24px; min-height:24px; padding:0 6px; font:inherit; font-size:12px; border-radius:8px; width:auto }
.dclock { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; padding:4px }
.dtime { font-weight:650; letter-spacing:-.02em; line-height:1; white-space:nowrap }
.ddate { color:var(--ink2); font-size:13px }

/* notes */
.notetext { padding:4px 6px; font-size:14px; line-height:1.55; overflow-wrap:anywhere } .notetext p { margin:0 0 8px } .notetext h4 { margin:4px 0 6px; font-size:14px }
.notetext ul { margin:0 0 8px; padding-left:18px } .notetext a { color:var(--accent) }
.widget.k-note:has(.tint-yellow) { background:color-mix(in srgb, #fab219 12%, var(--surface)) }
.widget.k-note:has(.tint-blue) { background:color-mix(in srgb, #2a78d6 10%, var(--surface)) }

/* the map */
.mapbox { position:absolute; inset:0 0 34px 0; border-radius:8px; overflow:hidden; background:var(--sunk) }
.radarbar { position:absolute; left:0; right:0; bottom:0; height:30px; display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink2) }
.radarbar input[type=range] { flex:1; min-width:40px; width:0; min-height:auto; padding:0; accent-color:var(--ink) }
.radarbar .rsrc { color:var(--muted); font-size:11.5px } .radarbar .rtime { flex:none; white-space:nowrap }
@container (max-width:380px) { .radarbar .rsrc { display:none } }
.leaflet-tile-pane .basemap { filter:saturate(.35) }
:root[data-theme="dark"] .leaflet-tile-pane .basemap { filter:invert(1) hue-rotate(180deg) brightness(.85) contrast(.85) saturate(.3) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .leaflet-tile-pane .basemap { filter:invert(1) hue-rotate(180deg) brightness(.85) contrast(.85) saturate(.3) } }
.radarbar .wbtn .i { width:14px; height:14px; fill:currentColor; stroke:none }
.sitepop { display:flex; flex-direction:column; gap:3px; font:13px system-ui, sans-serif } .sitepop a { color:var(--accent) }
.leaflet-container { font:12px system-ui, sans-serif; background:var(--sunk) }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background:var(--surface); color:var(--ink) }
.procbox { display:block !important } .procbox .mimic { position:absolute; inset:0; width:100%; height:100%; max-width:none; max-height:none }
@media (max-width:560px) {
  .strip { flex-wrap:wrap; row-gap:6px }
  .strip .what { white-space:normal; flex-basis:calc(100% - 34px) }
  .strip button { margin-left:28px }
}
.figure .fv { white-space:normal; overflow-wrap:anywhere }
.figure.hero .fv { white-space:nowrap }
.mapbox { isolation:isolate; z-index:0 }
.mapbox .leaflet-control-attribution { font-size:10px; max-width:80% }
.permgrid { display:grid; gap:8px } .permgrid .check, .page.narrow .form > .check { align-items:flex-start } .permgrid .check input, .page.narrow .form > .check input { margin-top:2px }          /* the box beside the first line of a label that wraps */
.cmdrow { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:8px; align-items:center; margin-top:8px }
pre.cmd { margin:0; padding:8px 10px; background:var(--raise); border-radius:8px; font:12.5px ui-monospace, Menlo, monospace; overflow-x:auto; white-space:pre }
@media (max-width:760px) { .cmdrow { grid-template-columns:1fr } }
/* an edge's install commands: evenly spaced, the command boxes lined up under each other */
.edgecmds:not(:empty) { display:grid; gap:8px; margin-bottom:12px } .edgecmds > .cmdrow { margin-top:0 }
@media (min-width:761px) { .cmdrow { grid-template-columns:5.5em minmax(0,1fr) auto } }

/* on a touch screen, text boxes at 16px: smaller and the phone zooms the page on every tap */
@media (pointer:coarse) { input, select, textarea, .field > input, .field > select, .field > textarea, .composer textarea { font-size:16px } }

/* a table of alarms on a phone: each row a small stacked item, nothing off the side */
@media (max-width:760px) {
  table.stack thead { display:none }
  table.stack tr { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; padding:10px 12px; border-top:1px solid var(--border) }
  table.stack td { display:block; padding:0; border:0; font-size:13px; color:var(--ink2) }
  table.stack td.main { flex-basis:100%; color:var(--ink); font-size:14px }
  table.stack td:empty { display:none }
  table.stack td[data-label]::before { content:attr(data-label) ": "; color:var(--muted) }
  table.stack td.acts { flex-basis:100%; text-align:left; padding-top:4px }
  table.stack tr.grouprow { padding-top:14px; background:none } table.stack tr.grouprow td { flex-basis:100%; background:none; color:var(--ink2); font-weight:620 }
}
.legend .li.clip { min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block }
.mapbox .leaflet-bar a { background:var(--surface); color:var(--ink); border-color:var(--border) }
.mapbox .leaflet-bar a:hover { background:var(--raise) }
.mapbox .leaflet-bar { border:1px solid var(--border) !important; box-shadow:none !important }
.mapbox .leaflet-control-attribution { background:color-mix(in srgb, var(--surface) 85%, transparent) !important; color:var(--ink2) }
.mapbox .leaflet-control-attribution a { color:var(--ink2) }

/* the map's pins: a site or PLC, a mark for each PLC there, and its name */
.mpin-anchor { background:none; border:0 }
.mpin { position:absolute; transform:translate(-11px, -11px); display:flex; align-items:center; gap:6px; white-space:nowrap; cursor:pointer }
.mpin.left { flex-direction:row-reverse; transform:translate(calc(-100% + 11px), -11px) }
.mpin .mdots { display:flex; gap:2px; padding:2px; background:var(--surface); border-radius:12px; box-shadow:0 1px 4px rgb(0 0 0 / .35) }
.mpin.left .mdots { flex-direction:row-reverse }
.ic.mdot { width:18px; height:18px; top:0; font-size:10px }
.ic.mdot.ok { background:var(--equip); box-shadow:inset 0 0 0 5px var(--surface) } .ic.mdot.empty { background:var(--muted); box-shadow:inset 0 0 0 6px var(--surface) }
.mpin b { overflow:hidden; text-overflow:ellipsis; font:600 12.5px system-ui, sans-serif; color:var(--ink); background:var(--surface); padding:2px 7px; border-radius:6px; box-shadow:0 1px 3px rgb(0 0 0 / .25) }
.mapkey { display:flex; flex-direction:column; gap:3px; padding:6px 8px; background:color-mix(in srgb, var(--surface) 92%, transparent); border:1px solid var(--border); border-radius:8px; font:11.5px system-ui, sans-serif; color:var(--ink2) }
.mapkey span { display:flex; align-items:center; gap:6px } .mapkey .ic.mdot { width:14px; height:14px; font-size:8px } .mapkey .ic.mdot.ok { box-shadow:inset 0 0 0 4px var(--surface) }
@container (max-width:380px) { .mapkey { display:none } }
.mpop { display:flex; flex-direction:column; gap:12px; font:13px system-ui, sans-serif; min-width:180px; max-height:320px; overflow:auto }
.mpop-place { display:flex; flex-direction:column; gap:8px }
.mpop-title { font-size:14px } .mpop-where { color:var(--muted); font-size:12px; margin-top:-6px }
.mpop-plc { display:flex; flex-direction:column; gap:3px; padding-top:8px; border-top:1px solid var(--border) }
.mpop-name { font-weight:620; color:var(--ink) !important; text-underline-offset:3px }
.mpop-state, .mpop-alarm { display:flex; align-items:center; gap:4px; color:var(--ink2) } .mpop .ic { width:16px; height:16px; font-size:9px; top:0 }
.mpop-reads { display:flex; flex-wrap:wrap; gap:2px 12px; color:var(--ink2) } .mpop-reads b { color:var(--ink) }
.leaflet-popup-content { margin:12px 14px }
.mapempty { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:900; background:var(--surface); padding:10px 14px; border-radius:10px; box-shadow:var(--shadow); color:var(--ink2); font-size:13px; text-align:center; max-width:80% }


/* the weather: what it is doing outside a site, and what it will do */
.wx { display:flex; flex-direction:column; gap:10px; height:100%; min-height:0; overflow:hidden; padding:2px 2px 0 }
.wx-now { flex:1 1 auto; min-height:max-content; display:flex; align-items:center; gap:14px }
.wx-said { min-width:0 }
.wx-temp { font-size:38px; font-weight:300; line-height:1; letter-spacing:-1px } .wx-temp small { font-size:16px; color:var(--ink2); margin-left:2px }
.wx-word { font-size:14px; font-weight:600; margin-top:4px }
.wx-facts { display:flex; flex-wrap:wrap; gap:2px 10px; color:var(--ink2); font-size:12.5px; margin-top:4px }
.wx-strip { flex:none; display:flex; gap:2px; justify-content:space-between; border-top:1px solid var(--border); padding-top:8px }
.wx-cell { display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0; flex:1 }
.wx-when { color:var(--ink2); font-size:11.5px; white-space:nowrap }
.wx-cell b { font-size:14px } .wx-low { color:var(--ink2); font-size:12px }
.wx-cell .wx-rain { color:var(--ink2); font-size:11px; min-height:14px } .wx-cell .wx-rain.wet { color:var(--p-blue) }
.wx-foot { display:flex; flex-wrap:wrap; gap:2px 12px; align-items:baseline; margin-top:auto; padding:6px 0 2px; border-top:1px solid var(--border); color:var(--ink2); font-size:11.5px }
.wx-foot .wx-src { margin-left:auto; opacity:.7 }
.wxart { flex:none } .wxart .wx-sun { fill:var(--p-amber); stroke:var(--p-amber) } .wxart .wx-sun.ray { stroke-width:2.4; stroke-linecap:round; fill:none }
.wxart .wx-moon { fill:var(--p-amber) }
.wxart .wx-cloud { fill:var(--ink2) }
.wxart.cloud .wx-cloud:first-child { fill:color-mix(in srgb, var(--ink2) 45%, transparent) }
.wxart .wx-rain { stroke:var(--p-blue); stroke-width:2.6; stroke-linecap:round } .wxart .wx-rain.thin { stroke-width:1.6 }
.wxart .wx-snow { fill:var(--p-teal) } .wxart .wx-fog { stroke:var(--ink2); stroke-width:2.4; stroke-linecap:round }
.wxart .wx-bolt { fill:var(--p-amber) }
@container (max-width:260px) { .wx-facts span:nth-child(n+3) { display:none } }

/* a widget shown large, over the page */
dialog.bigwidget { width:min(1500px, 94vw); height:min(960px, 88vh); max-width:none; max-height:none; padding:0; border:0; border-radius:14px; background:transparent; overflow:visible }
dialog.bigwidget::backdrop { background:rgb(0 0 0 / .45) } dialog.bigwidget:focus { outline:none }
.widget.expanded { position:relative; left:auto; top:auto; width:100%; height:100%; box-shadow:0 20px 60px rgb(0 0 0 / .35) }
.widget.expanded .whead h3 { font-size:15px }
@media (max-width:760px) { dialog.bigwidget { width:100vw; height:100dvh; border-radius:0 } .widget.expanded { border-radius:0 } }

/* a widget showing a signal whose alarm is waiting to be acknowledged: a red pulse at its edge, once a second,
   and a badge saying so; steady red for anyone who asked for less motion */
.widget.unacked { --wc:var(--crit); border-color:var(--wc); animation:unacked 1.1s ease-in-out infinite }
@keyframes unacked {
  0%, 100% { box-shadow:0 0 0 1px var(--wc), 0 0 0 0 color-mix(in srgb, var(--wc) 0%, transparent) }
  50% { box-shadow:0 0 0 2px var(--wc), 0 0 16px 3px color-mix(in srgb, var(--wc) 40%, transparent) }
}
@media (prefers-reduced-motion: reduce) { .widget.unacked { animation:none; box-shadow:0 0 0 2px var(--wc) } }
.ackbadge { display:inline-flex; align-items:center; gap:5px; align-self:center; font-size:12px; font-weight:620; color:var(--crit); text-decoration:none; white-space:nowrap; padding:2px 8px 2px 4px; border-radius:999px; background:color-mix(in srgb, var(--crit) 10%, var(--surface)) }
.ackbadge:hover { text-decoration:underline; text-underline-offset:3px }
.ackbadge .ic { width:16px; height:16px; font-size:9px; top:0 }

/* things to press are pressed, not selected: no text cursor, no text selection, and labels drawn over
   a diagram let the press through to what is under them */
button, [role="button"], a.cardtitle, .motor-tile, .sheetlist a, .sublinks a, .nav a, .bottomnav a, .bottomnav button { -webkit-user-select:none; user-select:none }
button *, [role="button"] * { cursor:inherit }
.mimic { -webkit-user-select:none; user-select:none }
.mimic text { pointer-events:none }
.mimic .hit, .mimic .hit * { cursor:pointer; pointer-events:auto }
.mimic .hitpad { fill:transparent; stroke:none }
.mimic .hit:hover .hitpad { fill:color-mix(in srgb, var(--ink) 5%, transparent) }
.mimic .hit:focus-visible { outline:none } .mimic .hit:focus-visible .hitpad { stroke:var(--accent); stroke-width:2 }
.pagebox { display:contents }
.rowlink { background:none; border:0; padding:0; min-height:0; font:inherit; font-weight:620; color:var(--ink); text-align:left; cursor:pointer } .rowlink:hover { text-decoration:underline; text-underline-offset:3px }
.sitelist { display:grid; gap:14px; margin-top:14px }
.sysbody > * + * { margin-top:12px }          /* System's cards one under another, apart as on every page */
.sitecard td.main { min-width:7em }
/* People and Activity beside the sidebar (a tablet): too narrow for their columns, so each row stacked, as on a phone */
@media (min-width:761px) and (max-width:1100px) {
  :is(table.people, table.activity) thead { display:none }
  :is(table.people, table.activity) tr { display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; padding:10px 12px; border-top:1px solid var(--border) }
  :is(table.people, table.activity) td { display:block; padding:0; border:0; font-size:13px; color:var(--ink2) }
  table.people td.main { flex-basis:100%; color:var(--ink); font-size:14px }
  table.people td[data-label]::before { content:attr(data-label) ": "; color:var(--muted) }
  table.people td.acts { margin-left:auto; text-align:right }
  .activity td.what { color:var(--ink) } .activity td.ink2 { flex-basis:100%; min-width:0; overflow-wrap:anywhere }
  .activity tr.groupitem { background:var(--sunk); padding-left:22px } .activity .groupitem td, .activity .groupitem td:first-child { background:none; padding-left:0 }
}
@media (max-width:1000px) { .sitecard th, .sitecard td { padding-left:8px; padding-right:8px } }
.sitecard td.tools a, .sitecard td.tools button, .sitecard .q, .healthgrid .q { white-space:nowrap } .sitecard td.tools > * + * { margin-left:12px }          /* each link and state whole; the row wraps between them */
.sitecard .sitefacts { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; margin:2px 0 12px; font-size:13.5px }
.sitecard table { margin-top:4px } .sitecard .addplc { margin-top:12px; align-items:end } .sitecard .cardhead { padding:0 0 8px }
.textlink.danger { color:var(--crit) } .nowrap { white-space:nowrap }
.sitecard .addplc > button { flex:none; width:auto; align-self:end; margin-bottom:0 }
.card.pad > .row { align-items:start }

/* tasks */
.tasks { display:flex; flex-direction:column; gap:2px; padding:2px 4px 8px }
.taskadd { display:flex; gap:6px; padding:4px 2px 8px; flex-wrap:wrap } .taskadd input[type=text] { flex:1 1 140px; min-width:0 } .taskadd input[type=date] { flex:0 1 150px }
.task { display:flex; align-items:flex-start; gap:6px; padding:6px 4px; border-radius:8px }
.task:hover { background:var(--raise) }
.task label { display:flex; gap:10px; align-items:flex-start; flex:1; min-width:0; cursor:pointer }
.task input[type=checkbox] { width:18px; height:18px; min-height:0; margin:1px 0 0; flex:none; accent-color:var(--ink) }
.taskbody { display:flex; flex-direction:column; gap:1px; min-width:0 } .tasktext { font-size:14px; overflow-wrap:anywhere }
.taskmeta { font-size:12px; color:var(--muted); display:flex; gap:4px; align-items:center } .taskmeta:empty { display:none }
.taskmeta.late { color:var(--crit); font-weight:600 } .taskmeta.soon { color:var(--ink2); font-weight:600 } .taskmeta .ic { width:14px; height:14px; font-size:8px; top:0 }
.task.done .tasktext { text-decoration:line-through; color:var(--muted) }
.task .taskx { opacity:0; flex:none } .task:hover .taskx, .task:focus-within .taskx { opacity:1 }
@media (pointer:coarse) { .task .taskx { opacity:.6 } }
.donelist summary { cursor:pointer; color:var(--ink2); font-size:13px; padding:8px 4px }
.cal { position:absolute; inset:0; display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); grid-template-rows:auto repeat(6, minmax(0, 1fr)); gap:3px }
.calhead { font-size:11.5px; color:var(--muted); text-align:center; padding-bottom:2px }
.calday { display:flex; flex-direction:column; align-items:stretch; gap:2px; min-height:0; height:auto; padding:3px 4px; border:1px solid var(--border); border-radius:6px; background:var(--surface); text-align:left; overflow:hidden; font-size:11.5px; cursor:pointer }
.calday:hover { background:var(--raise) } .calday.other { opacity:.45 }
.calday.today { border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink) }
.calday.late { border-color:var(--crit) }
.calnum { font-weight:620; font-size:12px; color:var(--ink) }
.calitem { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink2); background:var(--raise); border-radius:4px; padding:0 4px }
.calitem.done { text-decoration:line-through; color:var(--muted) } .calmore { color:var(--muted); font-size:11px }
.calmonth { font-weight:620; color:var(--ink) } .wbtn.flip .i { transform:scaleX(-1) }
dialog form.taskadd { display:flex; flex-direction:row; flex-wrap:wrap; max-height:none; padding:6px 8px; margin-top:10px }
dialog form.taskadd input { min-height:36px; height:36px } dialog form.taskadd button { flex:none }
.unitbtn { margin-left:8px; font-size:12px }
.widget.justadded { outline:2px solid var(--accent); outline-offset:2px; transition:outline-color 1.5s } 
.strip { min-height:52px }
.strip.quiet { border-left-color:var(--border); box-shadow:none; background:transparent }
.strip.quiet .what { color:var(--muted) } .strip.quiet .ic { transform:scale(.85) }
@media (pointer:coarse) { .strip { min-height:60px } }
/* a switch shows its own state, hovered or not */
.switch:hover { background:var(--base) } .switch[aria-checked="true"], .switch[aria-checked="true"]:hover { background:var(--ink) }
.indialog .sidehead h2 { display:none } .indialog .sidehead { justify-content:flex-end }
.ackbadge .short { display:none }
@container (max-width:420px) { .ackbadge .full { display:none } .ackbadge .short { display:inline } }
.toast.lasting { bottom:auto; top:68px }     /* under the top bar, never over the alarm in it */
@media (max-width:760px) { .toast.lasting { top:auto; bottom:calc(84px + env(safe-area-inset-bottom)) } }
.strip.back { border-left-style:dashed; border-radius:0 10px 10px 0 } .strip.back .what b { font-weight:560 }

/* snake */
.snakebox { position:absolute; inset:0; display:grid; place-items:center; outline:none; border-radius:8px; touch-action:none; cursor:pointer }
.snakebox:focus-visible { box-shadow:inset 0 0 0 2px var(--accent) }
.snakebox canvas { display:block; border-radius:6px }
.snakemsg { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); max-width:80%; padding:10px 14px; border-radius:10px;
  background:var(--surface); box-shadow:var(--shadow); color:var(--ink); font-size:13.5px; text-align:center }          /* opaque: the snake never shows through its words */
.snakemsg { display:grid; gap:8px; min-width:200px }
.snakeover { font-size:15px } .snakenews { font-weight:600; color:var(--accent) } .snakehint { color:var(--ink2); font-size:12.5px }
.snakeboard { list-style:none; margin:0; padding:0; display:grid; gap:2px; text-align:left; font-size:13px }
.snakeboard li { display:grid; grid-template-columns:22px 1fr auto; gap:8px; padding:3px 6px; border-radius:6px }
.snakeboard li.you { background:var(--raise); font-weight:600 }
.snakeboard .rk { color:var(--muted) } .snakeboard .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.modal .snakeboard, dialog .snakeboard { font-size:14px; gap:4px }
.snakerec svg { vertical-align:-3px; margin-right:3px; width:14px; height:14px }
.activity .groupbtn { background:none; border:0; padding:0; min-height:0; font:inherit; color:var(--ink); cursor:pointer; display:inline-flex; gap:4px; align-items:baseline; text-align:left }
.activity .groupbtn .chev { display:inline-block; transition:transform .15s; color:var(--muted); font-size:11px }
.activity .groupbtn[aria-expanded="true"] .chev { transform:rotate(90deg) }
.activity .groupbtn .count { color:var(--muted); font-variant-numeric:tabular-nums }
.activity .groupitem td { background:var(--sunk); font-size:13px } .activity .groupitem td:first-child { padding-left:22px }
.activity .groupbtn .chev { font-size:15px; line-height:1; width:10px } .activity td:first-child { white-space:nowrap }
@media (max-width:760px) {          /* the audit on a phone: each row stacked, nothing off the side */
  .activity td.what { color:var(--ink) } .activity td.ink2 { flex-basis:100%; min-width:0; overflow-wrap:anywhere }
  .activity tr.groupitem { background:var(--sunk); padding-left:22px } .activity .groupitem td, .activity .groupitem td:first-child { background:none; padding-left:0 }
}

/* editing: edges to pull, the selected widget, a title being renamed */
/* tiling, while editing: the gaps between tiles are handles, and where a dragged widget would go is shown */
.divider { position:absolute; z-index:3; touch-action:none }
.divider.row { cursor:col-resize } .divider.col, .divider.rowend { cursor:row-resize }
.divider::after { content:""; position:absolute; border-radius:3px; background:var(--accent); opacity:0; transition:opacity .12s }
.divider.row::after { left:50%; top:10%; bottom:10%; width:4px; margin-left:-2px }
.divider.col::after, .divider.rowend::after { top:50%; left:10%; right:10%; height:4px; margin-top:-2px }
.divider:hover::after, .divider.active::after { opacity:.7 }
.grid.sizing, .grid.sizing * { cursor:inherit; user-select:none }
.dropmark { position:absolute; z-index:4; pointer-events:none; border-radius:10px; background:color-mix(in srgb, var(--accent) 16%, transparent); outline:2px solid var(--accent) }
.dropmark.row { border-radius:2px; background:var(--accent); outline:0 }
.dropmark.swap { background:color-mix(in srgb, var(--accent) 10%, transparent) }
.editing .widget.selected { outline:2px solid var(--accent); outline-offset:-1px }
.titleedit { font:inherit; font-weight:620; min-height:26px; height:26px; padding:0 6px; width:min(260px, 100%) }
.editbar button:disabled { opacity:.45; cursor:default }

/* phone: the dashboards as a row of tabs */
.boardchips { display:none }
@media (max-width:760px) {
  .boardhead { flex-wrap:wrap }
  .boardchips { display:flex !important; order:10; flex-basis:calc(100% + 24px); max-width:none; gap:8px; overflow-x:auto; scrollbar-width:none; margin:4px -12px 0; padding:2px 12px 6px; scroll-padding-inline:12px; scroll-snap-type:x proximity }
  .boardchips::-webkit-scrollbar { display:none }
  .boardchips a, .boardchips .addchip { flex:none; scroll-snap-align:start; display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:999px;
    border:1px solid var(--border); background:var(--surface); color:var(--ink2); text-decoration:none; font-size:15px; font-weight:560; white-space:nowrap }
  .boardchips a[aria-current="page"] { background:var(--ink); color:var(--page); border-color:var(--ink) }
  .boardchips .addchip { padding:0 12px } .boardchips .addchip .i { width:18px; height:18px }
  /* a fade at the right edge says the row goes on */
  .boardhead { position:relative }
}

/* tasks, again: a quiet add line, round checks, day chips, groups */
.tasks { gap:0; padding:0 2px 6px }
.taskadd { display:flex; align-items:center; gap:8px; padding:6px 8px; margin:2px 0 6px; border-radius:10px; background:var(--raise) }
.taskadd .plus { color:var(--muted); display:inline-flex } .taskadd .plus .i { width:16px; height:16px }
.taskadd input[type=text] { flex:1; min-width:0; border:0; background:transparent; padding:4px 0; min-height:30px; font-size:14px }
.taskadd input[type=text]:focus { outline:none }
.taskadd:focus-within { box-shadow:inset 0 0 0 1.5px var(--accent) }
.duewrap { position:relative; display:inline-flex }
.duepick { position:absolute; inset:0; opacity:0; pointer-events:none; width:1px; height:1px }
.duechip { display:inline-flex; align-items:center; gap:4px; min-height:22px; height:22px; padding:0 8px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface); color:var(--ink2); font-size:12px; font-weight:560; white-space:nowrap; cursor:pointer }
.duechip .i { width:12px; height:12px } .duechip.none { color:var(--muted); border-style:dashed }
.duechip.late { color:var(--crit); border-color:color-mix(in srgb, var(--crit) 45%, var(--border)); background:color-mix(in srgb, var(--crit) 7%, var(--surface)) }
.duechip.today { color:var(--ink); border-color:var(--ink2) }
span.duechip { cursor:default }
.taskgroup { display:flex; justify-content:space-between; font-size:11.5px; font-weight:650; letter-spacing:.02em; color:var(--muted); padding:10px 8px 4px; text-transform:uppercase }
.taskgroup.late { color:var(--crit) } .taskgroup span { font-weight:560 }
.task { display:flex; align-items:flex-start; gap:10px; padding:7px 8px; border-radius:10px; transition:opacity .35s, transform .35s }
.task .check { flex:none; width:20px; height:20px; min-height:0; padding:0; margin-top:1px; border-radius:50%; border:1.8px solid var(--muted); background:transparent;
  display:inline-grid; place-items:center; color:transparent; transition:background .15s, border-color .15s, color .15s }
.task .check .i { width:13px; height:13px; stroke-width:2.6 }
.task .check:hover:not(:disabled) { border-color:var(--ink); color:var(--muted) }
.task .check.on { background:var(--ink); border-color:var(--ink); color:var(--page) }
.task.late .check { border-color:var(--crit) }
.task.finishing { opacity:0; transform:translateX(8px) } .task.finishing .tasktext { text-decoration:line-through }
.task .taskbody { display:flex; flex-direction:column; gap:4px; min-width:0; flex:1 }
.task .tasktext { font-size:14px; line-height:1.35; overflow-wrap:anywhere }
.task .taskmeta { display:flex; flex-wrap:wrap; gap:6px; align-items:center } .task .taskmeta:empty { display:none }
.task .tasklist, .task .doneby { font-size:12px; color:var(--muted) }
.task.done .tasktext { text-decoration:line-through; color:var(--muted) }
.task .taskedit { font:inherit; font-size:14px; min-height:28px; height:28px; padding:0 6px; width:100% }
.taskempty { display:flex; flex-direction:column; align-items:center; gap:6px; padding:24px 0; color:var(--muted); font-size:13px }
.taskempty .i { width:28px; height:28px; stroke-width:2 }
.donelist summary { cursor:pointer; color:var(--muted); font-size:12.5px; padding:10px 8px 4px; list-style:none }
.donelist summary::-webkit-details-marker { display:none }
@media (pointer:coarse) { .task .check { width:24px; height:24px } }
/* a task with no day shows its "Due" chip only when pointed at, so the list stays quiet */
.task .duechip.none { opacity:0; transition:opacity .15s } .task:hover .duechip.none, .task:focus-within .duechip.none { opacity:1 }
.task .taskmeta:has(> .duewrap .duechip.none):not(:has(.tasklist, .doneby)) { height:0; overflow:visible; margin-top:-4px }
.task:hover .taskmeta:has(> .duewrap .duechip.none) { height:auto; margin-top:0 }
@media (pointer:coarse) { .task .duechip.none { opacity:.55 } .task .taskmeta:has(> .duewrap .duechip.none) { height:auto; margin-top:0 } }

/* formulas */
.formulabox { display:grid; gap:6px }
textarea.formula { font-family:ui-monospace, "JetBrains Mono", monospace; font-size:13px; line-height:1.5; width:100%; white-space:pre; overflow-wrap:normal; overflow-x:auto }   /* code: a line is a line, scrolled sideways, never wrapped */
.formulafind { position:relative } .formulafind input { width:100% }
.formulapick { position:absolute; z-index:5; left:0; right:0; top:calc(100% + 2px); max-height:260px; overflow:auto; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); padding:4px }
.formulapick button { display:flex; flex-direction:column; align-items:flex-start; width:100%; height:auto; min-height:0; padding:6px 8px; border:0; background:none; text-align:left; border-radius:6px }
.formulapick button:hover, .formulapick button:focus { background:var(--raise) }
.formulapick button span { font-size:12px; color:var(--muted) }
.formularesult { font-size:13px; font-family:ui-monospace, "JetBrains Mono", monospace; min-height:18px }
.formularesult.good { color:var(--ink) } .formularesult.bad { color:var(--crit) }
.formulahelp summary { cursor:pointer; color:var(--ink2); font-size:12.5px }
.formulahelp p, .formulahelp dl { font-size:12.5px; color:var(--ink2); margin:6px 0 }
.formulahelp dl { display:grid; grid-template-columns:auto 1fr; gap:4px 12px } .formulahelp dd { margin:0 }
.formulahelp code { font-size:12px }
.taskadd .addchip { display:inline-flex; align-items:center; gap:4px } .taskadd .addchip .duewrap { align-items:center }

/* Signal metadata editor and explicit dashboard layout mode. */
.signal-actions { display:flex; align-items:center; gap:14px; white-space:nowrap }
.signal-edit { min-height:30px; padding:4px 12px; font-size:12px }
.signal-editor { width:min(620px, calc(100vw - 24px)) }
.signal-identity { display:flex; flex-wrap:wrap; align-items:center; gap:8px; color:var(--muted); font-size:12px }
.signal-identity code { flex-basis:100%; overflow-wrap:anywhere; color:var(--ink) }
.signal-fields { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:16px 18px }
.signal-fields .field { align-content:start }
.signal-editor .dbody > p { margin:4px 0 }
.signal-fields input, .signal-fields select { width:100% }
.signal-preview { display:flex; flex-direction:column; gap:8px; margin-top:12px; padding:20px; border:1px solid var(--border); border-radius:12px; background:var(--raise) }
.signal-preview .sub { font-size:10px; letter-spacing:.08em }
.signal-preview-value { font-size:28px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere }
.editbar { border:1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); background:color-mix(in srgb, var(--accent) 5%, var(--surface)); padding:16px; gap:10px; box-shadow:inset 3px 0 var(--accent) }
.edit-mode-heading { display:flex; flex-wrap:wrap; align-items:center; gap:12px; width:100%; margin-bottom:4px; color:var(--ink2); font-size:12px }
.edit-mode-badge { display:inline-flex; align-items:center; gap:8px; padding:5px 10px; border-radius:6px; background:var(--accent); color:white; font-weight:650; font-size:12px }
.edit-mode-badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor }
.editbar .note { color:var(--ink2); font-size:12px; line-height:1.7 }
.grid.editing { background-image:radial-gradient(color-mix(in srgb, var(--accent) 24%, transparent) 1px, transparent 1px); background-size:16px 16px; border-radius:12px; outline:1px solid color-mix(in srgb, var(--accent) 20%, transparent); outline-offset:7px }
.editing .widget { outline:1px solid color-mix(in srgb, var(--accent) 50%, var(--border)); box-shadow:0 2px 8px rgb(0 0 0 / .04) }
.editing .whead, .editing .widget.bare .whead { position:relative; inset:auto; display:flex; flex-wrap:nowrap; align-items:center; flex:0 0 44px; min-height:44px; padding:6px 10px; z-index:2; border-bottom:1px solid color-mix(in srgb, var(--accent) 20%, var(--border)); background:color-mix(in srgb, var(--accent) 7%, var(--surface)); cursor:grab; gap:8px }
.editing .whead h3, .editing .widget.bare .whead h3 { display:block; min-width:0; flex:1; font-size:12px; text-overflow:ellipsis; cursor:grab }
.editing .whead .legend, .editing .wtools > :not(.edit-control) { display:none }
.editing .wtools { flex-shrink:0; gap:4px }
.drag-grip { font-size:24px; line-height:1; color:var(--accent); flex-shrink:0 }
.widget-edit { min-height:26px; height:26px; padding:0 9px; font-size:11px; color:var(--accent); border-color:color-mix(in srgb, var(--accent) 25%, var(--border)); background:var(--surface) }
.widget-edit-shield { position:absolute; inset:44px 0 0; z-index:1; display:flex; align-items:flex-end; justify-content:center; padding:10px; background:color-mix(in srgb, var(--surface) 12%, transparent); cursor:grab }
.widget-edit-shield span { opacity:0; transition:opacity .12s; color:var(--ink2); background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:3px 9px; font-size:10px; box-shadow:0 1px 4px rgb(0 0 0 / .06); pointer-events:none }
.editing .widget.lifted .whead, .editing .widget.lifted .widget-edit-shield { cursor:grabbing }
.widget-edit-shield:hover span { opacity:1 }
.divider::after { opacity:.18 }
.divider:hover::after, .divider:focus-visible::after, .divider.active::after { opacity:.7 }
.resize-grip { position:absolute; display:block; border-radius:8px; background:var(--accent); box-shadow:0 0 0 2px var(--surface); pointer-events:none }
.divider.row .resize-grip { width:5px; height:30px; top:50%; left:50%; transform:translate(-50%, -50%) }
.divider.col .resize-grip, .divider.rowend .resize-grip { height:5px; width:38px; left:50%; top:50%; transform:translate(-50%, -50%) }
.divider:focus-visible { outline:2px solid var(--accent); outline-offset:1px; border-radius:4px }
.grid.flow.editing .drag-grip { display:none }
.grid.flow.editing .whead, .grid.flow.editing .widget-edit-shield { cursor:default }
@media (max-width:620px) {
  .signal-fields { grid-template-columns:1fr }
  .editbar input { flex:1; min-width:140px }
  .editbar .danger { font-size:11px }
  .signal-actions { gap:8px }
}

/* Mixed units share one widget and time range, with a labeled scale per unit. */
.unit-panels { position:absolute; inset:0; display:flex; flex-direction:column; overflow:auto; gap:10px; padding:4px }
.unit-panel { display:flex; flex-direction:column; flex:1 0 auto; min-height:130px; border:1px solid var(--border); border-radius:8px; overflow:hidden }
.unit-panel.timed { min-height:190px }
.unit-panel-head { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:8px 10px; background:var(--raise) }
.unit-panel-head .legend { flex:1 1 100% }
.unit-panel-label { font-size:12px }
.unit-panel-body { flex:1; position:relative; min-height:80px; margin:4px }
.unit-panel.timed .unit-panel-body { min-height:130px }
.mixed-scale-note { flex-basis:100%; font-size:11px; color:var(--muted); padding-bottom:4px }
.editing .mixed-scale-note { display:none }

/* colors chosen by name, and the setpoints of a measured signal */
.colorpick { display:inline-flex; align-items:center; gap:8px }
.colorpick .swatch { width:16px; height:16px; border-radius:5px; background:var(--c, var(--muted)); border:1px solid var(--border); flex:none }
@media (pointer:fine) { .field .colorpick select { font-size:14px } }   /* as the other boxes of a form, not its label's size */
.setpoints { display:grid; gap:6px; margin-top:12px }
.setpoints .sub { font-size:11px; letter-spacing:.08em; color:var(--muted) }
.setpoint { display:grid; grid-template-columns:78px 1fr auto auto auto; gap:8px; align-items:center }
.setpoint b { font-weight:600; font-size:13px }
.setpoint input[type=number] { width:100% }
.setpoint .check { margin:0 }
@media (max-width:640px) { .setpoint { grid-template-columns:72px 1fr; grid-auto-flow:row } }
.gauge .gzone { fill:none; stroke-width:4; opacity:.55; stroke-linecap:round }
.bgref.setpoint { background:var(--c); opacity:.9 }
.signals .sub .equip { border:1px solid var(--border); border-radius:999px; padding:0 7px; margin-left:6px; color:var(--ink2) }
.signals td.mono { overflow-wrap:anywhere }   /* a long tag breaks rather than widening the table */
.signals .unitbtn.mono { display:inline-block; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom }   /* a calculated signal's script: cut short, never widening the table (its whole text is its tooltip) */
/* Signals and Reports on a phone or tablet: each row stacked (as table.stack does on a phone), the spark and the tag hidden, nothing widening it */
@media screen and (max-width:1000px) {
  :is(.signals, .report) table.stack, :is(.signals, .report) table.stack tbody { display:block } :is(.signals, .report) table.stack thead { display:none }
  :is(.signals, .report) table.stack tr { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; padding:10px 12px; border-top:1px solid var(--border) }
  :is(.signals, .report) table.stack td { display:block; padding:0; border:0; font-size:13px; color:var(--ink2) }
  :is(.signals, .report) table.stack td.main { flex-basis:100%; min-width:0; color:var(--ink); font-size:14px }
  :is(.signals, .report) table.stack td.hide-s, :is(.signals, .report) table.stack td:empty { display:none }
  .signals .unitbtn.mono { max-width:100% }
  :is(.signals, .report) table.stack tr.grouprow { padding-top:14px; background:none } :is(.signals, .report) table.stack tr.grouprow td { flex-basis:100%; background:none; color:var(--ink2); font-weight:620 }
}

/* choosing a place on a map */
dialog:has(.pickbody) { width:min(760px, calc(100vw - 24px)) }          /* the dialog widened for the map, not its body pushed past it */
.pickfind { display:flex; gap:8px; margin-bottom:8px } .pickfind input { flex:1 }
.pickmap { height:min(56vh, 420px); border-radius:10px; overflow:hidden; border:1px solid var(--border); background:var(--sunk) }
.pickwhere { margin-top:8px; font-size:13px; color:var(--ink2) }
.placerow { display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.widgetcolors { display:grid; gap:6px; margin-top:12px }
.widgetcolors .sub { font-size:11px; letter-spacing:.08em; color:var(--muted) }
.widgetcolor { display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.widgetcolor .nm { min-width:140px; font-weight:600; font-size:13px }

/* a signal's setpoints as a strip: the bands in their colors, and where the reading is */
.spstrip { position:relative; height:12px; margin:2px 0 4px; border-radius:6px; background:var(--sunk) }
.spstrip .sp { position:absolute; top:2px; width:2px; height:8px; border-radius:1px; background:var(--c); transform:translateX(-1px) }
.spstrip .now { position:absolute; top:0; width:3px; height:12px; border-radius:2px; background:var(--c); transform:translateX(-1.5px); box-shadow:0 0 0 2px var(--surface) }

/* controls: what the PLC reports, large; the control; how the last write went; why nothing can be written */
.control { position:absolute; inset:0; padding:2px 6px 4px; display:flex; flex-direction:column; gap:8px; overflow:auto; scrollbar-width:thin }
.cnow { font-size:clamp(22px, 2.6vw, 34px); font-weight:650; letter-spacing:-.02em; line-height:1.1; overflow-wrap:anywhere }
.cnow small { font-size:.45em; color:var(--muted); font-weight:450; margin-left:4px; letter-spacing:0 }
.cnow.stale { color:var(--muted) }
.cbody { display:flex; flex-direction:column; gap:6px }
.centry { display:flex; align-items:center; gap:8px }
.centry input { flex:1; min-width:0; width:6em; font-variant-numeric:tabular-nums }
.cunit { color:var(--muted); font-size:13px }
.cbuttons { display:flex; gap:8px; flex-wrap:wrap }
.cbuttons button { flex:1; min-width:84px; min-height:40px; font-weight:600 }
.cbuttons button[aria-pressed="true"] { border-color:var(--strong-border); background:var(--raise); opacity:1; color:var(--ink2) }
.ctoggle { display:flex; align-items:center; gap:12px }
.switch.big { width:56px; min-height:30px; height:30px; padding:3px } .switch.big span { width:24px; height:24px }
.switch.big[aria-checked="true"] span { transform:translateX(26px) }
.seg.cmodes { flex-wrap:wrap; overflow:visible } .seg.cmodes button { flex:1; min-height:36px }
.seg.cmodes button[aria-pressed="true"]:disabled { opacity:1 }
.wstate { display:flex; align-items:flex-start; gap:6px; font-size:12.5px; color:var(--ink2); line-height:1.35 }
.wstate:empty { display:none }
.wstate .ic { flex:none; width:16px; height:16px; font-size:10px; margin-top:1px }
.wstate.failed { color:var(--crit) }
.wstate .spin { flex:none; width:12px; height:12px; margin:2px 2px 0; border-radius:50%; border:2px solid var(--base); border-top-color:var(--ink); animation:spin 0.9s linear infinite }
@keyframes spin { to { transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce) { .wstate .spin { animation:none; border-color:var(--ink2) } }
.wwhy { font-size:12px; color:var(--muted); line-height:1.35 }
.climits { margin-top:-2px }
/* asking for a write: the tag, its value now and the new one */
.writeconfirm { display:grid; gap:12px; padding:14px; border:1px solid var(--border); border-radius:10px; background:var(--raise); min-width:min(420px, 80vw) }
.writeconfirm > div:first-child { display:flex; flex-direction:column; gap:2px }
.writeconfirm .sub { font-size:10.5px; letter-spacing:.08em; color:var(--muted) }
.writeconfirm code { font-size:12px; color:var(--muted); overflow-wrap:anywhere }
.writeconfirm .change { display:flex; align-items:end; gap:14px; flex-wrap:wrap }
.writeconfirm .change > div { display:flex; flex-direction:column; gap:2px }
.writeconfirm .change b { font-size:22px; font-weight:650 }
.writeconfirm .arrow { font-size:20px; color:var(--muted); padding-bottom:2px }
/* a signal's writing settings */
.writing { display:grid; gap:8px; margin-top:12px }
.writing .sub { font-size:11px; letter-spacing:.08em; color:var(--muted) }
.writing .limits { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px }
.writing .limits input { width:100% }
.writing .named { display:grid; gap:6px }
.writing .namedrow { display:grid; grid-template-columns:110px 1fr auto; gap:8px; align-items:center }
.writing .bools { display:grid; grid-template-columns:auto 1fr; gap:8px 12px; align-items:center }
.signals .sub .writable { border-color:var(--strong-border); color:var(--ink) }
.writes td.failed { color:var(--crit) } .writes td:first-child { white-space:nowrap }

/* ---------------------------------------------------------------- motors: state at a glance, commands confirmed by what it shows */
.mface { display:flex; flex-direction:column; gap:10px; min-width:0 }
.motorbox { padding:4px 8px 8px }
.mhead { display:flex; align-items:center; gap:12px; min-width:0 }
.mwords { flex:1; min-width:0 }
.mstate { font-size:clamp(22px, 2.4vw, 30px); font-weight:700; letter-spacing:-.02em; line-height:1.05 }
.msub { font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mface[data-state="fault"] .mstate { color:var(--crit) }
.mface[data-state="fault"] .mstate::before { content:"◆ "; font-size:.7em; vertical-align:.12em }
.mface[data-state="unknown"] .mstate { color:var(--muted) }
.mside { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:none }
.mmode { font-size:11px; font-weight:700; letter-spacing:.08em; padding:3px 8px; border-radius:6px; border:1px solid var(--strong-border); color:var(--ink) }
.mmode.off { border-color:var(--warn); color:var(--warntext); background:color-mix(in srgb, var(--warn) 12%, transparent) }
.mhours { font-size:12.5px; color:var(--ink2) }
.mface-icon { width:56px; height:56px; flex:none; overflow:visible }
.mface-icon .ring { fill:none; stroke:transparent; stroke-width:2.5; transform-origin:32px 32px }
.mface-icon .body { fill:var(--surface); stroke:var(--equip-off); stroke-width:2.5; transition:fill .25s, stroke .25s }
.mface-icon .m { font:750 17px system-ui, sans-serif; text-anchor:middle; fill:var(--equip-off); transition:fill .25s }
.mface-icon.run .body { fill:var(--equip); stroke:var(--equip) }
.mface-icon.run .m { fill:var(--surface) }
.mface-icon.run .ring { stroke:var(--equip); stroke-dasharray:5 7; animation:spin 2.4s linear infinite }
.mface-icon.fault .body { stroke:var(--crit); stroke-width:3.5 }
.mface-icon.fault .m { fill:var(--crit) }
.mface-icon.fault .ring { stroke:var(--crit); stroke-width:2 }
.mface-icon.unknown .body { stroke:var(--muted); stroke-dasharray:4 4 }
.mface-icon.unknown .m { fill:var(--muted) }
@media (prefers-reduced-motion:reduce) { .mface-icon.run .ring { animation:none } }
.mbtns { display:grid; grid-template-columns:repeat(auto-fit, minmax(76px, 1fr)); gap:8px }
.mbtn { flex-direction:column; gap:1px; min-height:58px; padding:6px 8px; border-width:1.5px; border-color:var(--strong-border); border-radius:10px;
  transition:transform .08s, background .15s, border-color .15s }
.mbtn .mlabel { font-size:15px; font-weight:680 }
.mbtn small { font-size:11px; color:var(--muted); font-weight:500; min-height:1.2em }
.mbtn:active:not(:disabled) { transform:scale(.96) }
.mbtn:disabled { opacity:1; color:var(--muted); background:var(--sunk); border-color:var(--strong-border); border-style:dashed }
.mbtn.going, .mbtn.asking { border-style:solid; border-color:var(--ink); color:var(--ink); background:var(--raise); animation:breathe 1.2s ease-in-out infinite }
@keyframes breathe { 50% { background:var(--surface) } }
@media (prefers-reduced-motion:reduce) { .mbtn.going, .mbtn.asking { animation:none } }
.mbar { height:6px; border-radius:3px; background:var(--sunk); overflow:hidden }
.mbar i { display:block; height:100%; background:var(--ink); transform-origin:left; transform:scaleX(0) }
.mline { font-size:12.5px; color:var(--ink2); line-height:1.35; min-height:1.35em }
/* while a command is under way its line stays one line (all of it in its tooltip), so the panel does not grow and shrink */
.mline.pending { white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .mface { container-type:inline-size }          /* its width from where it is put, never from a long name or line in it */
.mbar { height:4px; margin:-7px 0 }          /* the bar sits in the gap above the status line: it takes no row of its own */
.mline.failed { color:var(--crit) }
.mline.done { color:var(--ink2) }
.motorask { display:flex; gap:14px; align-items:flex-start; max-width:440px }
.motorask .mface-icon { width:48px; height:48px }
.motorask p { margin:6px 0 0; color:var(--ink2) }
button.stopbtn { background:var(--ink) }
.fpmotor { padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--page); margin-bottom:12px }
.mroles { display:grid; gap:10px; margin-top:6px }
.mroles .sub, .mremote .sub { font-size:11px; letter-spacing:.08em; color:var(--muted); margin-top:6px }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start } .row3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; align-items:start }
.row2 select, .row3 select, .row2 input, .row3 input { width:100% }
.mremote { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center } .mremote .sub { flex-basis:100% }
.mchoice { display:grid; gap:10px }
@media (max-width:560px) { .row2, .row3 { grid-template-columns:1fr } }
.mbtn small:empty { display:none }
.motorbox { justify-content:center }
.mhead.open { cursor:pointer; border-radius:10px; margin:-4px; padding:4px }
.mhead.open:hover { background:var(--raise) }

/* ---------------------------------------------------------------- process diagrams (diagram.js): drawn with schemdraw on the server,
   painted from the readings the ISA-101 way: gray lines, running dark, stopped hollow, color only for an alarm, dashed when not known */
.pdbox { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden }
.pdstage { width:100%; height:100%; display:flex; align-items:center; justify-content:safe center; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin;
  overscroll-behavior-x:contain }
.pdstage > svg { width:100%; height:auto; max-height:100%; overflow:visible; flex:none }
.pdbox.zoomed .pdstage { justify-content:flex-start; overflow:auto }
.pdbox.zoomed .pdstage > svg { min-width:var(--readable); max-height:none }
.pdzoom { position:absolute; right:8px; bottom:8px; z-index:2; min-height:32px; height:32px; font-size:12.5px; font-weight:620; box-shadow:var(--shadow) }
.pdbox.zoomed::after { content:""; position:absolute; top:0; right:0; bottom:0; width:24px; pointer-events:none; background:linear-gradient(to right, transparent, var(--surface)) } .pdbox.zoomed.atend::after { display:none }
.pd { --pd-line:var(--equip-off); --pd-bg:var(--surface); --pd-liquid:color-mix(in srgb, var(--p-blue) 16%, var(--sunk)); --pd-track:var(--sunk); --pd-bar:var(--ink2);
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif }
.pd text { font-family:inherit; fill:var(--ink2) }
.pd .pe-label { fill:var(--ink2); font-weight:560 }
.pd .pe-value { fill:var(--ink); font-weight:650; font-variant-numeric:tabular-nums }
.pd .pe-mark { fill:var(--pd-line) }
.pd [class^="pe-"] { transition:fill .25s, stroke .25s, opacity .25s }
.pd .pe-body[data-st="running"], .pd .pe-body[data-st="open"], .pd .pe-body[data-st="on"] { fill:var(--equip) !important; stroke:var(--equip) !important }
.pd .pe-mark[data-st="running"], .pd .pe-mark[data-st="open"] { fill:var(--surface) !important; stroke:var(--surface) !important }
.pd text.pe-mark[data-st="running"], .pd text.pe-mark[data-st="open"] { fill:var(--surface) !important; stroke:none !important }     /* a letter, not outlined as thick as a line */
.pd .pe-body[data-st="stopped"], .pd .pe-body[data-st="closed"] { fill:var(--surface) !important }
.pd [data-st="alarm"].pe-body, .pd [data-st="alarm"].pe-line, .pd [data-st="alarm"].pe-lamp { stroke:var(--alarm-c, var(--crit)) !important; stroke-width:3 !important }
.pd [data-st="alarm"].pe-lamp { fill:var(--alarm-c, var(--crit)) !important }
.pd [data-st="alarm"].pe-value, .pd [data-st="alarm"].pe-label { fill:var(--alarm-c, var(--crit)) !important }
.pd [data-st="alarm"].pe-bar { fill:var(--alarm-c, var(--crit)) !important }
.pd [data-prio="2"] { --alarm-c:var(--prio-2, var(--serious)) } .pd [data-prio="3"] { --alarm-c:var(--prio-3, var(--warn)) } .pd [data-prio="4"] { --alarm-c:var(--prio-4, var(--muted)) }
.pd [data-st="unknown"].pe-body, .pd [data-st="unknown"].pe-line, .pd [data-st="unknown"].pe-lamp, .pd [data-st="unknown"].pe-pipe { stroke-dasharray:1.5 4 !important; stroke:var(--muted) !important }
.pd .pe-ribbon { fill:none !important }
.pd .pe-ribbon[data-st="running"] { stroke:var(--equip) !important; stroke-dasharray:14 6; animation:pdflow .7s linear infinite }
.pd [data-st="unknown"].pe-value { fill:var(--muted) !important }
.pd [data-st="unknown"].pe-liquid { opacity:.35 }
.pd .pe-lamp[data-st="on"] { fill:var(--equip) !important; stroke:var(--equip) !important }
.pd .pe-liquid { transform-box:fill-box; transform-origin:50% 100%; transition:transform .8s cubic-bezier(.2,.7,.2,1) }
.pd .pe-bar { transform-box:fill-box; transform-origin:0 50%; transition:transform .6s cubic-bezier(.2,.7,.2,1), fill .25s }
.pd .pe-tick { stroke:var(--ink) !important; transition:transform .6s }
.pd .pe-tick[data-i="1"] { stroke:var(--warn) !important }
/* a pipe that flows: its line moves the way it flows; one that is chosen (a destination) is dark */
.pd .pe-pipe[data-st="flowing"], .pd .pe-pipe[data-st="on"] { stroke:var(--equip) !important }
.pd .pe-flow[data-st="flowing"], .pd .pe-flow[data-st="on"] { fill:var(--equip) !important; stroke:var(--equip) !important }
.pd .pe-pipe[data-st="flowing"] { stroke-dasharray:9 5 !important; animation:pdflow .9s linear infinite }
@keyframes pdflow { to { stroke-dashoffset:-14 } }
@media (prefers-reduced-motion:reduce) { .pd .pe-pipe[data-st="flowing"] { animation:none; stroke-dasharray:none !important } }
.pd .pdhit { cursor:pointer; outline:none }
.pd .pdpad { fill:transparent; stroke:none; transition:fill .15s }
.pd .pdhit:hover .pdpad, .pd .pdhit:focus-visible .pdpad { fill:color-mix(in srgb, var(--accent) 9%, transparent) }
.pd .pdhit:focus-visible .pdpad { stroke:var(--accent); stroke-width:1.5 }
.pdlost { position:absolute; inset:0; display:grid; place-items:center; background:repeating-linear-gradient(45deg, transparent 0 7px, color-mix(in srgb, var(--muted) 12%, transparent) 7px 8px) }
.pdlost > div { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 16px; display:grid; gap:4px; text-align:center; max-width:80%; box-shadow:var(--shadow) }
.pdlost span { color:var(--ink2); font-size:12.5px }
.diagram .pdbox { position:relative; height:clamp(260px, 34vw, 430px) }
/* on a phone the drawing is as tall as it comes out at that width, with room under it for Larger */
@media (max-width:760px) { .diagram .pdbox:not(.zoomed) { height:auto } .diagram .pdbox:not(.zoomed):has(.pdzoom:not([hidden])) { padding-bottom:44px } }

/* ---------------------------------------------------------------- the heads-up bar: every site heard, the alarm that needs someone, live */
.hud { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:10px; min-height:56px; margin:-16px -24px 16px; padding:8px 24px;
  background:color-mix(in srgb, var(--page) 86%, transparent); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--border) }
.hudsites { display:flex; gap:6px; flex:0 1 auto; min-width:0; max-width:32% }     /* a long site name is shortened; the alarm keeps its room */
.sitechip { display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 11px 0 9px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface); text-decoration:none; font-size:12.5px; font-weight:600; white-space:nowrap; transition:background .15s, border-color .15s, transform .08s }
.sitechip:hover { background:var(--raise) } .sitechip:active { transform:scale(.97) }
.sitechip { min-width:0 } .sitechip .sname { min-width:0; overflow:hidden; text-overflow:ellipsis } .sitechip .sdot, .sitechip .sword { flex:none }
.band > .ic, .band > .bic, .band button, .band .more { flex:none }
.sitechip .sdot { width:8px; height:8px; border-radius:50%; background:var(--good) }
.sitechip .sword { color:var(--ink2); font-weight:500 }
.sitechip.lost { border-color:color-mix(in srgb, var(--crit) 55%, var(--border)); background:color-mix(in srgb, var(--crit) 8%, var(--surface)) }
.sitechip.lost .sdot { background:var(--crit) } .sitechip.lost .sword { color:var(--crit) }
.sitechip.p1 .sdot { background:var(--prio-1, var(--crit)) } .sitechip.p2 .sdot { background:var(--prio-2, var(--serious)) }
.sitechip.p3 .sdot { background:var(--prio-3, var(--warn)) } .sitechip.p4 .sdot { background:var(--prio-4, var(--muted)) }
.band { flex:1; min-width:0; display:flex; align-items:center; gap:10px; height:40px; padding:0 6px 0 12px; border-radius:10px; border:1px solid transparent;
  transition:background .25s, border-color .25s }
.band .what { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration:none; color:var(--ink2); font-size:13.5px }
.band .what b { color:var(--ink); font-weight:650 }
.band .more { color:var(--ink2); font-size:13px; white-space:nowrap; padding:0 8px; text-decoration:underline; text-underline-offset:3px }
.band button { height:30px; min-height:30px; font-weight:600 }
.band.calm { color:var(--muted) } .band.calm .what { color:var(--muted) }
.band .bic { display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:color-mix(in srgb, var(--good) 16%, transparent); color:var(--good) }
.band .bic .i { width:13px; height:13px; stroke-width:2.6 }
.band.p1 { --bc:var(--prio-1, var(--crit)) } .band.p2 { --bc:var(--prio-2, var(--serious)) } .band.p3 { --bc:var(--prio-3, var(--warn)) } .band.p4 { --bc:var(--prio-4, var(--muted)) }
.band.urgent { background:color-mix(in srgb, var(--bc) 13%, var(--surface)); border-color:color-mix(in srgb, var(--bc) 45%, transparent) }
.band.urgent .ic { animation:waiting 1.1s ease-in-out infinite alternate }
.band.back { background:var(--surface); border-color:var(--border); border-left:3px dashed var(--bc); border-radius:0 10px 10px 0 }
@keyframes waiting { from { box-shadow:0 0 0 0 color-mix(in srgb, var(--bc) 55%, transparent) } to { box-shadow:0 0 0 6px color-mix(in srgb, var(--bc) 0%, transparent) } }
.hudlive { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink2); white-space:nowrap; flex:none }
.hudlive .pulse { position:relative; width:8px; height:8px; border-radius:50%; background:var(--good) }
.hudlive .pulse.beat::after { content:""; position:absolute; inset:0; border-radius:50%; background:var(--good); animation:beat .9s ease-out }
@keyframes beat { from { transform:scale(1); opacity:.7 } to { transform:scale(3); opacity:0 } }
.hudlive .lword { font-weight:650; color:var(--ink) }
.hudlive.off .pulse { background:var(--crit) } .hudlive.off .lword { color:var(--crit) }
.hudlive .ltime { color:var(--muted); min-width:7.5ch }
.hudsearch { gap:8px; color:var(--ink2); height:34px; min-height:34px; flex:none }
.hudsearch kbd { margin-left:4px }
.hud .who .account { padding:0; border-radius:50% }
.hud .who .me { width:34px; height:34px }
@media (prefers-reduced-motion:reduce) { .band.urgent .ic, .hudlive .pulse.beat::after { animation:none } }
@media (max-width:1180px) { .hudsearch span, .hudsearch kbd, .hudlive .ltime { display:none } .sitechip .sword { display:none } }
/* a tablet: the alarm in the bar takes two short lines rather than being cut to a word, and Live is told by its pulse */
@media (min-width:761px) and (max-width:1000px) {
  .hud { gap:8px } .hudlive .lword { display:none } .band { height:auto; min-height:40px; padding-block:3px } .band button { padding:0 10px }
  .band .what { white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; font-size:12.5px; line-height:1.3 }
}
@media (max-width:760px) { .hud { display:none } }
/* the menu, narrowed to its icons by whoever wants the room */
.railtoggle { width:36px; min-height:36px; padding:0; border:0; background:none; color:var(--muted); align-self:flex-start; margin-left:4px }
.railtoggle:hover { color:var(--ink) }
body.railmin { --rail:64px }
body.railmin .rail { padding-inline:10px; align-items:center }
body.railmin .rail .brand span, body.railmin .links a span:not(.badge), body.railmin .sublinks { display:none }
body.railmin .links a { justify-content:center; padding:10px; position:relative }
body.railmin .links .badge { position:absolute; top:0; right:-7px; min-width:18px; height:18px; font-size:10.5px; padding:0 4px }     /* at the bell's shoulder, not over it */
body.railmin .railtoggle { align-self:center; margin:0 } body.railmin .railtoggle .i { transform:scaleX(-1) }
/* a tablet: the menu is narrowed to its icons by itself, so the bar and the dashboards have the room */
@media (min-width:761px) and (max-width:1000px) {
  body { --rail:64px }
  .rail { padding-inline:10px; align-items:center }
  .rail .brand span, .links a span:not(.badge), .sublinks, .railtoggle { display:none }
  .links a { justify-content:center; padding:10px; position:relative }
  .links .badge { position:absolute; top:0; right:-7px; min-width:18px; height:18px; font-size:10.5px; padding:0 4px }
}
.rail, .content { transition:width .2s ease, margin-left .2s ease }

/* ---------------------------------------------------------------- the Overview's first words: how the plant is, in a sentence */
.lead { display:grid; gap:4px; padding:6px 2px 2px }
.lead .leadline { font-size:clamp(26px, 3.2vw, 38px); font-weight:720; letter-spacing:-.025em; line-height:1.1; margin:0 }
.lead .leadsub { margin:0; color:var(--ink2); font-size:15px }
.lead.good .leadline::before, .lead.calm .leadline::before { content:""; display:inline-block; width:.42em; height:.42em; border-radius:50%; background:var(--good); margin-right:.32em; vertical-align:.14em }
.lead.calm .leadline::before { background:var(--muted) }
.lead.lost .leadline { color:var(--crit) }
.lead.p1 .leadline { color:var(--prio-1, var(--crit)) } .lead.p2 .leadline { color:var(--prio-2, var(--serious)) }
.lead.p3 .leadline { color:color-mix(in srgb, var(--prio-3, var(--warn)) 70%, var(--ink)) }
.sitefacts { color:var(--ink2); font-size:13px }
.plantcard .hint { color:var(--muted); font-size:12.5px }
.plantbody { display:grid; gap:12px; padding:8px 12px 12px }
.plantbody.withmotors { grid-template-columns:minmax(0, 1fr) minmax(240px, 300px) }
.plantdiagram { position:relative; height:clamp(280px, 30vw, 440px) }
.plantmotors { display:flex; flex-direction:column; gap:10px }
.plantmotors .pm { padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--page) }
.plantmotors .mstate { font-size:22px }
.plantmotors .mface-icon { width:44px; height:44px }
@media (max-width:1100px) { .plantbody.withmotors { grid-template-columns:1fr } .plantmotors { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)) } }

/* ---------------------------------------------------------------- alarms as an inbox: the list, and the chosen one beside it */
.inbox { display:grid; grid-template-columns:minmax(300px, 400px) minmax(0, 1fr); gap:14px; align-items:start }
.inboxlist { display:flex; flex-direction:column; gap:2px; position:sticky; top:72px; max-height:calc(100dvh - 160px); overflow:auto; scrollbar-width:thin;
  padding:6px; border:1px solid var(--border); border-radius:14px; background:var(--surface) }
.inboxgroup { display:flex; align-items:center; gap:8px; padding:10px 8px 4px; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }
.inboxgroup .n { font-variant-numeric:tabular-nums; color:var(--ink2) }
.inboxgroup button { margin-left:auto; text-transform:none; letter-spacing:0; font-size:12px }
.inboxgroup.unack { color:var(--crit) }
.inboxrow { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:10px; width:100%; min-height:52px; padding:7px 10px;
  border:1px solid transparent; border-radius:10px; background:none; text-align:left; justify-content:stretch; white-space:normal; transition:background .12s, transform .08s }
.inboxrow:hover { background:var(--raise) } .inboxrow:active { transform:scale(.99) }
.inboxrow.on { background:var(--raise); border-color:var(--strong-border) }
.inboxrow .rt { min-width:0; display:flex; flex-direction:column }
.inboxrow .rt b { font-weight:620; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.inboxrow .rt small { color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.inboxrow .age { font-size:12px; color:var(--muted) }
.inboxrow.unack .rt b { font-weight:720 }
.inboxrow.returned .rt b, .inboxrow.acked .rt b { font-weight:520; color:var(--ink2) }
.inboxrow.shelved { opacity:.7 }
.inboxrow.unack .ic { animation:waiting 1.1s ease-in-out infinite alternate; --bc:var(--crit) }
@media (prefers-reduced-motion:reduce) { .inboxrow.unack .ic { animation:none } }
.inboxclear { display:grid; justify-items:center; gap:6px; padding:36px 16px; text-align:center }
.inboxclear p { margin:0; color:var(--ink2) }
.inboxdetail { min-width:0; display:flex; flex-direction:column; gap:14px; padding:20px 22px; border:1px solid var(--border); border-radius:14px; background:var(--surface); box-shadow:var(--shadow);
  animation:rise .18s ease-out }
@keyframes rise { from { opacity:0; transform:translateY(4px) } to { opacity:1; transform:none } }
.inboxnone { padding:40px 10px; text-align:center; color:var(--ink2) } .inboxnone p { margin:6px 0 0; font-size:13px }
.detailhead { display:flex; gap:14px; align-items:flex-start }
.detailhead h2 { font-size:24px; font-weight:720; letter-spacing:-.02em; line-height:1.15; margin:2px 0 4px }
.detailhead .dprio { font-size:12.5px; font-weight:650; color:var(--ink2) }
.detailhead.p1 .dprio { color:var(--prio-1, var(--crit)) } .detailhead.p2 .dprio { color:var(--prio-2, var(--serious)) }
.detailhead .dstate { color:var(--ink2); font-size:13px }
.ic.big { width:34px; height:34px; font-size:15px; flex:none }
.detailacts { display:flex; flex-wrap:wrap; gap:8px }
.detailacts kbd { margin-left:4px; font-size:10.5px; opacity:.7 }
.detailacts .primary kbd { background:transparent; color:inherit; border-color:currentColor }
.detailnow { display:flex; flex-wrap:wrap; gap:12px 28px; padding:12px 14px; border-radius:12px; background:var(--raise) }
.detailnow > div { display:flex; flex-direction:column; gap:2px; min-width:0 }
.detailnow .sub { font-size:10.5px; letter-spacing:.08em; color:var(--muted) }
.detailnow b { font-size:20px; font-weight:680 } .detailnow div:last-child b { font-size:14px; font-weight:600 }
.detailnow code { font-size:12px; color:var(--muted) }
.detailguide h3, .detailmoment h3, .detailpast h3 { font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:6px }
.detailguide p { margin:0; font-size:15px; line-height:1.55; max-width:70ch; white-space:pre-line }
.detailguide.none p { font-size:13px; color:var(--muted) }
.detailtrend { position:relative; height:220px }
.detailtrend .plot { position:absolute; inset:0 }
@media (max-width:900px) {
  .inbox { grid-template-columns:1fr } .inboxlist { position:static; max-height:none }
  .inbox:not(.chosen) .inboxdetail { display:none } .inbox.chosen .inboxlist { display:none }
  .inboxdetail { padding:14px } .detailhead h2 { font-size:20px }
}
.detailtrend.lanes { height:76px }   /* one lane and its time axis, as History sizes lanes */
.detailback { display:none; align-self:flex-start; text-decoration:none; font-weight:600 }
@media (max-width:900px) { .detailback { display:inline-flex } }
@media (pointer:coarse) { .detailacts kbd { display:none } }
.sitehead { flex-wrap:wrap } @media (max-width:760px) { .sitehead .sitefacts { flex-basis:100% } }

/* ---------------------------------------------------------------- motion: quick, quiet, and only on transform and opacity, so it stays at 60 frames a second */
.pagebox { animation:rise .16s ease-out }
dialog[open] { animation:pop .17s cubic-bezier(.2,.8,.25,1) }
dialog[open]::backdrop { animation:fadein .17s ease-out }
dialog.sheet[open] { animation:sheet .22s cubic-bezier(.2,.8,.25,1) }
@keyframes pop { from { opacity:0; transform:translateY(6px) scale(.985) } to { opacity:1; transform:none } }
@keyframes fadein { from { opacity:0 } to { opacity:1 } }
@keyframes sheet { from { transform:translateY(100%) } to { transform:none } }
.toast { animation:toastin .2s cubic-bezier(.2,.8,.25,1) }
@keyframes toastin { from { opacity:0; transform:translate(-50%, 10px) } to { opacity:1; transform:translateX(-50%) } }
button:not(:disabled):active, a.button:active { transform:scale(.97) }
button, a.button { transition:background .12s, border-color .12s, color .12s, transform .08s }
@media (prefers-reduced-motion:reduce) { .pagebox, dialog[open], dialog[open]::backdrop, .toast, .inboxdetail { animation:none } button:active { transform:none } }
.motorrow { display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--border) }
.motorrow small { color:var(--muted) }
.mdot { width:12px; height:12px; border-radius:50%; border:2px solid var(--equip-off); flex:none }
.mdot.run { background:var(--equip); border-color:var(--equip) } .mdot.fault { border-color:var(--crit); background:var(--crit) } .mdot.unknown { border-style:dashed }
.band.unknown { background:color-mix(in srgb, var(--crit) 8%, var(--surface)); border-color:color-mix(in srgb, var(--crit) 40%, transparent) } .band.unknown .what b { color:var(--crit) }
/* drawing a diagram: the script, and the drawing beside it as it is written */
dialog.drawedit { width:min(1400px, 96vw); height:min(900px, 92dvh); max-width:none }
dialog.drawedit form { height:100% }
.drawbody { flex:1; min-height:0; display:grid; grid-template-columns:minmax(320px, 2fr) 3fr; gap:14px; padding:14px 18px; overflow:hidden }
.drawleft { display:flex; flex-direction:column; gap:10px; min-height:0; overflow:auto }
.drawcode { flex:1; min-height:260px; font:13px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace; tab-size:2; white-space:pre; resize:none; font-variant-ligatures:none }
.drawright { position:relative; border:1px solid var(--border); border-radius:12px; background:var(--surface); min-height:300px }
.drawproblem { color:var(--crit); font-size:13px; white-space:pre-wrap } .drawproblem:empty { display:none }
.drawwarn { color:var(--warntext); font-size:12.5px } .drawwarn:empty { display:none }
.drawhelp { font-size:12.5px } .drawhelp summary { cursor:pointer; font-weight:600 }
.drawhelp div { padding:4px 0; border-top:1px solid var(--border) } .drawhelp code { font-size:11.5px; overflow-wrap:anywhere } .drawhelp small { display:block; color:var(--muted) }
@media (max-width:900px) { .drawbody { grid-template-columns:1fr; overflow:auto } .drawright { min-height:280px } .drawleft { overflow:visible; min-height:auto } }
.drawright.stale .pdbox { opacity:.35; filter:grayscale(1) } .drawright.stale::after { content:"The drawing as it last drew: the script has a problem"; position:absolute; left:12px; bottom:10px; font-size:12px; color:var(--muted) }
.prow .pv { margin-left:auto; font-weight:620; font-size:13px } .prow .pv + .pk { margin-left:12px }
.acklist { margin:0; padding-left:0; list-style:none; display:grid; gap:6px } .acklist li { display:flex; gap:6px; align-items:baseline }
.couldnot { display:grid; justify-items:center; gap:6px } .couldnot b { color:var(--crit) } .couldnot span { color:var(--ink2); font-size:13px }
.pd text.pe-mark { fill:var(--ink2); font-weight:650 }
.pill-state.good .dot { background:var(--good) } .q.good::before { content:"● "; color:var(--good) }

/* Sim Lab (System, Sim Lab): a pretend plant; scenarios first, the controls they are made of under Advanced */
.simlab > * + * { margin-top:16px }
.simtitle { display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.simtitle h2 { margin:0 }
.simhero p { margin:8px 0 12px; max-width:80ch }
.simlead { font-size:16px; color:var(--ink) }
.simacts { display:flex; gap:10px 16px; align-items:center; flex-wrap:wrap }
.simacts button.big, .simhero button.big { min-height:44px; padding:0 20px; font-size:15px }
.simnow { border:1px solid var(--border); border-radius:10px; background:var(--raise); padding:10px 14px; margin:4px 0 14px; max-width:80ch }
.simnow h3 { margin:0 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink2) }
.simnow ul { margin:0; padding:0; list-style:none; display:grid; gap:5px; font-size:14px }
.simnow li { display:flex; gap:8px; align-items:baseline } .simnow li .dot { flex:none; transform:translateY(-1px) }
.dot.warn { background:var(--warn) }
.simsechead { display:flex; align-items:baseline; gap:6px 14px; flex-wrap:wrap; margin-bottom:10px }
.simsechead h2 { margin:0; font-size:18px }
.simgrid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px }
@media (max-width:1100px) { .simgrid { grid-template-columns:repeat(2, minmax(0, 1fr)) } }
.simscen { display:flex; flex-direction:column; overflow:hidden }
.simscenbtn { all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:6px; padding:14px 16px 12px; flex:1 }
.simscenbtn:hover:not(:disabled) { background:var(--raise) }
.simscenbtn:focus-visible { outline:2px solid var(--accent); outline-offset:-2px }
.simscenbtn:disabled { cursor:progress; opacity:.7 }
.simscenhead { display:flex; align-items:center; justify-content:space-between; gap:8px }
.simscenhead h3 { margin:0; font-size:16px; font-weight:650; color:var(--ink) }
.simwhat { color:var(--ink2); font-size:13.5px; line-height:1.4; flex:1 }
.simgo { align-self:flex-start; margin-top:6px; border:1px solid var(--strong-border); border-radius:8px; padding:5px 16px; font-weight:620; font-size:14px; color:var(--ink); background:var(--surface) }
.simscen:not(.on) .simscenbtn:hover .simgo { background:var(--ink); color:var(--surface); border-color:var(--ink) }
.simon { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--warntext) }
.simon .dot { background:var(--warn); margin:0 }
.simscen.on { border-color:var(--warn); box-shadow:0 0 0 1px var(--warn) inset }
.simscen.on .simscenbtn { background:color-mix(in srgb, var(--warn) 9%, var(--surface)) }
.simscen.on .simgo { background:var(--ink); color:var(--surface); border-color:var(--ink) }
.simlook { padding:8px 16px 10px; border-top:1px solid var(--border); font-size:12.5px; color:var(--ink2) }
.simadv > summary { padding:14px 16px; cursor:pointer; font-size:15px }
.simadvbody { padding:0 16px 16px; display:grid; gap:20px }
.simadvbody > p { margin:0 }
.simadvbody h3 { margin:0 0 4px; font-size:15px } .simadvbody section > p { margin:0 0 10px; max-width:90ch }
.simplcs { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:12px }
.simplc { border:1px solid var(--border); border-radius:10px; padding:12px 14px; display:grid; gap:10px; align-content:start }
.simreader { margin-top:12px; max-width:420px }
.simplchead { display:flex; align-items:center; justify-content:space-between; gap:8px } .simplchead h4 { margin:0; font-size:14px }
.simrow .seg { justify-self:start }
.simtoggle { display:grid; gap:4px }
.simtogglerow { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink) }
.simfind { display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap; margin-bottom:10px }
.simfind input { flex:0 1 320px; min-width:0 }
.simsignals .empty { padding:14px; justify-content:flex-start }
.chip.simtest { min-height:22px; font-size:12px; margin:2px 4px 2px 0; color:var(--warntext); border-color:var(--warn) }
td.simactive { color:var(--crit); font-weight:600 }
.simforce { display:flex; align-items:center; gap:10px; flex-wrap:wrap } .simforce > input, .simforce > select { width:170px }
.simoff { border-top:1px solid var(--border); padding-top:14px } .simoff p { margin:0 0 10px }
.sitechip .simtag, .sitehead .chip.sim { font-size:11px; font-weight:650; letter-spacing:.03em; color:var(--ink2); border:1px dashed var(--strong-border, var(--border));
  border-radius:6px; padding:0 5px; line-height:16px; min-height:0; text-transform:uppercase }
.sitehead .chip.sim { align-self:center; padding:1px 7px }
@media (max-width:760px) { .simfind input { flex:1 1 100% } .simplc .seg button { padding:0 8px } .simgrid { grid-template-columns:1fr } .simplcs { grid-template-columns:1fr } }

/* One sheet per signal, in parts; its alarms on it; many signals or alarms changed at once; equipment templates */
.signal-editor { width:min(700px, calc(100vw - 24px)) }
.sheetpart { display:grid; gap:12px; padding-top:14px; border-top:1px solid var(--border) }
.sheetpart > h3 { margin:0; font-size:13px; font-weight:650; letter-spacing:.01em }
.sheetpart > p { margin:0 }
.sigalarms { display:grid; gap:8px }
.sigalarms > .sub { font-size:11px; letter-spacing:.08em; color:var(--muted) }
.sigalarmlist { display:grid; gap:6px }
.sigalarm { display:grid; grid-template-columns:auto minmax(0, 1fr) auto auto; gap:10px; align-items:center; padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:var(--raise) }
.sigalarm.off { opacity:.65 }
.sigalarm .rt { display:grid; min-width:0 } .sigalarm .rt small { color:var(--ink2); overflow-wrap:anywhere }
.quickadd { display:flex; flex-wrap:wrap; gap:6px }
.quickadd .chip { cursor:pointer; background:var(--surface); color:var(--ink2); font-size:12.5px; padding:0 10px }
.quickadd .chip:hover { color:var(--ink); border-color:var(--ink2) }
.quickadd .chip.done { border-style:dashed }
.quickline:empty { display:none }
.quickline { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:8px 10px; border:1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius:10px }
.quickline input { width:120px }
.scalegrid { display:grid; grid-template-columns:auto 1fr auto 1fr; gap:8px; align-items:center }
.scalegrid input { width:100% }
@media (max-width:560px) { .scalegrid { grid-template-columns:auto 1fr } .sigalarm { grid-template-columns:auto minmax(0, 1fr) auto } .sigalarm .state { display:none } }
.alarm-editor { width:min(640px, calc(100vw - 24px)) }
.alarm-editor .seg { flex-wrap:wrap; overflow:visible }
.alarm-editor .seg.prio button { display:inline-flex; align-items:center; gap:6px }
.alarmwhat { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px } .alarmwhat .sub { font-size:11px; letter-spacing:.08em; color:var(--muted); flex-basis:100% }
.note.called:empty { display:none }
.gatebox summary { cursor:pointer; color:var(--ink2); font-size:13px }
.gatebox[open] summary { margin-bottom:10px }
.gaterow { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:10px; align-items:end }
.sigpick input { width:100% }
.bulkbar { position:sticky; top:64px; z-index:3; display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 12px; margin-bottom:10px;
  border:1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius:12px; background:color-mix(in srgb, var(--accent) 6%, var(--surface)); box-shadow:var(--shadow) }
.bulkbar[hidden] { display:none }
th.pickcol, td.pickcol { width:30px; padding-right:0 }
tr.chosen > td { background:color-mix(in srgb, var(--accent) 7%, transparent) }
.signals .sub .equip.alarms { color:var(--ink2); border-style:dashed }
.sub.bad { color:var(--crit) }
.equipment-editor { width:min(680px, calc(100vw - 24px)) }
.equipment-editor .seg { flex-wrap:wrap; overflow:visible }
.equipment-editor .roles { display:grid; grid-template-columns:1fr 1fr; gap:12px 18px } .equipment-editor .roles select { width:100% }
.stemrow { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:8px; align-items:end }
@media (max-width:620px) { .equipment-editor .roles { grid-template-columns:1fr } }
.detailpast { margin-top:16px }
.signal-editor .signal-preview { flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:4px 14px; padding:10px 14px; margin-top:0 }
.signal-editor .signal-preview .sub { flex-basis:100% }
.signal-editor .signal-preview-value { font-size:20px }

.testmark { display:inline-block; margin-left:8px; padding:0 7px; border-radius:999px; border:1px solid var(--border); font-size:11.5px; font-weight:650; color:var(--ink2); vertical-align:1px }
details.more { border-top:1px solid var(--border); padding-top:8px }
details.more > summary { cursor:pointer; font-weight:620; padding:4px 0 }
details.more .moregrid { display:grid; gap:14px; padding:8px 0 4px }
.hoursbox { display:grid; gap:8px } .hoursbox[hidden] { display:none }
.hoursbox .days { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13.5px }
.addphone { display:flex; gap:6px; margin-top:4px } .addphone input { min-height:30px; flex:1; min-width:0 } .addphone button { min-height:30px; white-space:nowrap }
.alarm.callout .calloutlog { grid-column:2 / -1 }
@media (max-width:560px) {
  .alarm.callout { grid-template-columns:22px minmax(0,1fr) }
  .alarm.callout .acts { grid-column:2; margin-top:6px }
  .alarm.callout .acts .when { display:inline; margin-right:auto }
}
.callsfield { display:grid; gap:8px } .callsfield .seg { flex-wrap:wrap; overflow:visible }
.callpicks { display:grid; gap:6px; padding:8px 10px; border:1px solid var(--border); border-radius:10px }
.callpicks[hidden] { display:none }
/* stacked on a phone, a row's tick sits at its top right, beside its name */
@media (max-width:760px) { table.stack tr:has(> td.pickcol) { position:relative } table.stack td.pickcol { position:absolute; right:12px; top:10px; width:auto } table.stack tr:has(> td.pickcol) td.main { padding-right:34px } }
@media screen and (max-width:1000px) { .signals table.stack tr:has(> td.pickcol) { position:relative } .signals table.stack td.pickcol { position:absolute; right:12px; top:10px; width:auto } .signals table.stack tr:has(> td.pickcol) td.main { padding-right:34px } }
.bulkbar { top:8px }
@media (max-width:760px) { .bulkbar { position:fixed; top:auto; bottom:calc(84px + env(safe-area-inset-bottom)); left:10px; right:10px; z-index:20; max-height:40vh; overflow:auto } .bulkbar > button { min-height:32px; font-size:13px } }

/* ---------------------------------------------------------------- dashboards: adding, the board's own controls, wall and print */
.boardhead .addbtn .i { width:16px; height:16px }
.boardhead .boardmenu { width:34px; height:34px; min-height:34px; border-color:var(--border); background:var(--surface); color:var(--ink) }
.forswitch, .boardtime { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted) }
.forswitch select, .boardtime select { min-height:32px; max-width:220px }
.savestate { color:var(--muted); font-size:12px } .savestate.saved { color:var(--good) } .savestate.failed { color:var(--crit) }
/* the Add panel: beside the board on a wide screen, so what is added is seen at once; a sheet on a phone */
.addpanel { position:fixed; z-index:60; top:0; right:0; bottom:0; width:380px; display:flex; flex-direction:column; gap:10px; padding:14px;
  background:var(--surface); border-left:1px solid var(--border); box-shadow:-10px 0 30px rgb(0 0 0 / .08) }
body.adding .content { margin-right:380px }
.addpanel .ahead { display:flex; align-items:center; gap:8px } .addpanel .ahead h2 { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.addpanel input[type=search] { width:100% }
.atray { display:flex; flex-direction:column; gap:8px; padding:10px; border:1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius:10px;
  background:color-mix(in srgb, var(--accent) 5%, var(--surface)); max-height:55%; overflow:auto; flex:none }
.achips { display:flex; flex-wrap:wrap; gap:6px; align-items:center }
.achip { min-height:28px; padding:0 8px; border-radius:99px; font-size:12.5px; gap:4px } .achip .i { width:12px; height:12px }
button.link { border:0; background:none; color:var(--accent); min-height:28px; padding:0 4px }
.aresults { flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:12px; margin:0 -4px; padding:0 4px }
.agroup { display:flex; flex-direction:column; gap:2px } .agroup .typegroup { margin:0 0 4px }
.arow { display:grid; grid-template-columns:18px minmax(0, 1fr) auto; grid-template-areas:"tick name val" "tick sub act"; column-gap:8px; row-gap:0;
  justify-content:stretch; align-items:center; text-align:left; white-space:normal; height:auto; min-height:44px; padding:6px 8px; border-color:transparent; background:none }
.arow:hover { background:var(--raise) } .arow.on { background:color-mix(in srgb, var(--accent) 10%, var(--surface)); border-color:color-mix(in srgb, var(--accent) 35%, var(--border)) }
.arow[draggable=true] { cursor:grab }
.arow .tick { grid-area:tick; width:16px; height:16px; border:1.5px solid var(--strong-border); border-radius:4px; font-size:11px; line-height:13px; text-align:center; color:var(--surface) }
.arow.on .tick { background:var(--accent); border-color:var(--accent) }
.arow:not(.sig) { grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"name act" "sub act" }
.arow .an { grid-area:name; font-weight:560; overflow:hidden; text-overflow:ellipsis } .arow .as { grid-area:sub; color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis }
.arow .av { grid-area:val; color:var(--ink2); font-size:12.5px } .arow .aact { grid-area:act; color:var(--accent); font-size:12.5px; font-weight:560 }
.types.small { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)) } .types.small button { padding:8px 10px } .types.small button span { font-size:12px }
.types.suggest { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)) } .types.suggest button { padding:9px 10px }
.types button.best { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent) }
.types button[draggable=true] { cursor:grab }
.dropmark.adding { position:absolute; z-index:12; pointer-events:none; border-radius:10px; background:color-mix(in srgb, var(--accent) 22%, transparent); border:2px solid var(--accent) }
@media (max-width:760px) {
  .addpanel { top:auto; left:0; width:auto; height:min(78dvh, 640px); border-left:0; border-top:1px solid var(--border); border-radius:16px 16px 0 0;
    padding-bottom:calc(14px + env(safe-area-inset-bottom)); box-shadow:0 -10px 30px rgb(0 0 0 / .18) }
  body.adding .content { margin-right:0 }
  .forswitch span, .boardtime span { display:none }
  .boardhead .addbtn span { display:none }
}
/* the values widget: several readings, each large */
.values { position:absolute; inset:0; display:grid; gap:8px; align-content:stretch; padding:2px }
.vcell { display:flex; flex-direction:column; justify-content:center; min-width:0; padding:6px 10px; border-radius:8px; background:var(--raise); text-decoration:none; color:inherit; overflow:hidden }
.vcell:hover { background:var(--sunk) }
.vcell .vn { font-size:12.5px; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.vcell .vv { font-size:var(--vsize, 26px); font-weight:650; letter-spacing:-.02em; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.vcell .vv small { font-size:.45em; color:var(--muted); font-weight:450; margin-left:3px; letter-spacing:0 }
.vcell .vs { font-size:12px; color:var(--muted); min-height:0 } .vcell .vs:empty { display:none }
.vcell .vs.p1, .vcell .vs.p2 { color:var(--crit) } .vcell .vs.p3 { color:var(--warntext) }
.vcell canvas { width:100%; height:28px; display:block; margin-top:2px }
.vcell.stale .vv { color:var(--muted) }
.grid.flow .widget.k-values .values { position:absolute }
/* the settings of a widget, with it shown live above them */
dialog.withpreview { width:min(760px, calc(100vw - 24px)); max-width:none }
.wpreview { height:230px; flex:none; margin-bottom:12px; position:relative; border:1px dashed var(--strong-border); border-radius:12px; background:var(--page); padding:8px }
.wpreview > .widget { position:absolute; inset:8px; width:auto; height:auto }
.wpreview > .empty { height:100%; display:flex; align-items:center; justify-content:center; color:var(--muted) }
@media (max-width:760px) { .wpreview { height:190px } }
/* a new dashboard: one click on what it is for */
.newboard { display:flex; flex-direction:column; gap:10px; margin-top:12px; max-height:min(60dvh, 560px); overflow:auto }
.types.nb { grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)) }
/* a wall display: the board alone, as large as the screen */
body.wall .rail, body.wall .hud, body.wall .phonebar, body.wall .bottomnav, body.wall #strip, body.wall .boardhead > :not(h1) { display:none !important }
body.wall .content { margin:0; padding:12px 16px }
body.wall .boardhead { margin-bottom:6px }
.wallexit { position:fixed; right:12px; bottom:12px; z-index:70; opacity:.15; transition:opacity .2s } .wallexit:hover, .wallexit:focus { opacity:1 }
/* printed: the board alone, laid out as on a wide screen, on a landscape page */
@media print {
  @page { size:landscape; margin:10mm }
  .boardhead > :not(h1), .wtools, .addpanel, .wallexit, .divider { display:none !important }
  .grid { width:1040px !important }
  .widget { break-inside:avoid; box-shadow:none }
  body.adding .content { margin-right:0 }
}
/* ---------------------------------------------------------------- history from a search, figures, notes, export, reports built, API keys */
.historypage.hist2 { display:flex; flex-direction:column; gap:10px; align-items:stretch }
.histhead { display:flex; flex-direction:column; gap:8px }
.histfind { display:flex; gap:10px; align-items:center }
.sigfind { position:relative; flex:1; min-width:0; max-width:620px }
.sigfind input { width:100%; min-height:40px; font-size:15px }
.sigfind-list { position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:40; background:var(--surface); border:1px solid var(--border);
  border-radius:10px; box-shadow:0 8px 28px rgb(0 0 0 / .16); max-height:min(60vh, 460px); overflow:auto; padding:4px }
.sigfind-list button { display:flex; flex-direction:column; align-items:flex-start; gap:1px; width:100%; border:0; background:none; border-radius:7px;
  text-align:left; padding:6px 10px; min-height:auto }
.sigfind-list button.on, .sigfind-list button:hover { background:var(--raise) }
.sigfind-list button span, .sigfind-none { color:var(--muted); font-size:12.5px }
.sigfind-none { padding:8px 10px }
.chiprow { display:flex; flex-wrap:wrap; gap:6px }
.chiprow:empty { display:none }
.sigchip { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); border-radius:999px; padding:0 2px 0 10px; min-height:30px;
  background:var(--surface); font-size:13px; max-width:100% }
.sigchip > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:560 }
.sigchip small { color:var(--muted); white-space:nowrap }
.sigchip .key { width:10px; height:3px; border-radius:2px; background:var(--c); flex:none }
.sigchip .chipx { border:0; background:none; min-height:26px; width:26px; padding:0; border-radius:50%; color:var(--muted); font-size:16px; line-height:1 }
.sigchip .chipx:hover { background:var(--raise); color:var(--ink) }
.hist2 .historyhead { gap:8px 10px }
.hist2 .historyhead select { min-height:34px }
.cmplabel { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink2) }
.hist2 .custom { display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.hist2 .custom[hidden] { display:none }
.cmpnote:empty { display:none }
.hist2.nothing .historycharts, .hist2.nothing .histfigs { display:none }
.histstart { display:grid; gap:10px }
.histstart:empty { display:none }
.recentlist { list-style:none; margin:0; padding:0; display:grid; gap:2px }
.recentlist a { display:flex; flex-wrap:wrap; gap:2px 12px; padding:8px 10px; border-radius:8px; text-decoration:none; color:var(--ink) }
.recentlist a:hover { background:var(--raise) }
.recentlist b { font-weight:600 }
.dbody.browse { min-width:min(560px, 86vw) } .dbody.browse .pick { max-height:60vh }
.histfigs { padding:10px 12px 12px }
.histfigs .cardhead { display:flex; align-items:baseline; gap:6px 12px; flex-wrap:wrap; padding:2px 4px 8px }
.figtable { overflow-x:auto }
table.figs { width:100%; border-collapse:collapse; font-size:13px }
table.figs th, table.figs td { padding:6px 8px; border-top:1px solid var(--border); vertical-align:top }
table.figs thead th { border-top:0; color:var(--muted); font-weight:600; font-size:12px; white-space:nowrap }
table.figs tbody th { text-align:left; font-weight:400 }
table.figs tbody th b { display:block; font-weight:600 } table.figs small { display:block; color:var(--muted); font-size:11.5px; font-weight:400 }
table.figs tr.past th, table.figs tr.past td { border-top:0; padding-top:0; color:var(--ink2) }
table.figs tr.past td small { display:inline; margin-left:6px }
table.figs small.up { color:var(--ink) } table.figs small.down { color:var(--ink2) }
table.figs td { white-space:nowrap }
.figlink { border:0; background:none; padding:0; min-height:auto; font:inherit; color:inherit; text-decoration:underline dotted; text-underline-offset:3px }
.apilink { display:block; font-size:11.5px; word-break:break-all; background:var(--raise); padding:6px 8px; border-radius:6px; user-select:all }
@media (max-width:760px) {
  .histfind { flex-wrap:wrap } .sigfind { flex:1 1 100%; max-width:none }
  .hist2 .historyhead > .grow { display:none }
  .cmplabel > span { display:none }
  table.figs thead { display:none }
  table.figs, table.figs tbody, table.figs tr { display:block }
  table.figs tr { border-top:1px solid var(--border); padding:6px 0; display:flex; flex-wrap:wrap; gap:2px 14px }
  table.figs tr.past { border-top:0; padding-top:0 }
  table.figs th, table.figs td { border:0; padding:2px 4px; display:block }
  table.figs tbody th { flex:1 1 100% }
  table.figs td::before { content:attr(data-label); display:block; color:var(--muted); font-size:11px }
  table.figs td.r { text-align:left }
}
/* reports built */
.rb { display:grid; gap:12px }
.rb .rbform { display:grid; gap:10px; padding:14px }
.rb .rbrow { display:flex; flex-wrap:wrap; gap:10px; align-items:end }
.rb .rbrow .field { margin:0 }
.figpick { display:flex; flex-wrap:wrap; gap:4px 14px }
.figpick label { display:inline-flex; gap:6px; align-items:center; font-size:13px }
.figpick input { min-height:auto; width:16px; height:16px }
.savedlist { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:10px }
.savedlist a { display:grid; gap:4px; padding:12px 14px; text-decoration:none; color:var(--ink) }
.savedlist a:hover { background:var(--raise) }
.savedlist small { color:var(--muted) }
.rbtable { overflow-x:auto }
.rbtable table { width:100%; border-collapse:collapse; font-size:13px }
.rbtable th, .rbtable td { padding:6px 8px; border-top:1px solid var(--border); white-space:nowrap }
.rbtable thead th { border-top:0; color:var(--muted); font-size:12px; font-weight:600 }
.rbtable tr.whole td, .rbtable tr.whole th { font-weight:620; border-top:2px solid var(--strong-border) }
.rbtable th.sig { text-align:center; border-bottom:1px solid var(--border) }
/* the script editor's look back over history */
.formulaprev { display:grid; gap:4px }
.formulaprev canvas { width:100%; height:120px; display:block }
.formulaprev .prevhead { display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:12.5px; color:var(--ink2) }
.formulastart { display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12.5px; color:var(--ink2) }
.formulastart button { min-height:28px; font-size:12.5px; padding:0 8px }
.formulareads { font-size:12.5px; color:var(--ink2) }
/* API keys */
.keyslist { display:grid; gap:6px }
.keyrow { display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; padding:8px 0; border-top:1px solid var(--border) }
.keyrow:first-child { border-top:0 }
.keyrow b { font-weight:600 } .keyrow small { color:var(--muted) } .keyrow .grow { flex:1 }
.newkey { font:13px ui-monospace, Menlo, monospace; word-break:break-all; background:var(--raise); padding:10px; border-radius:8px; user-select:all }
a.button.primary { background:var(--ink); color:var(--surface); border-color:var(--ink); font-weight:560; gap:6px }
.rb .rbrow .field.grow { flex:1 1 260px }
.rbresult { display:grid; gap:10px }
.savedcard { display:grid; gap:10px } .savedcard .cardhead { padding:0; border:0 } .savedcard h3 { margin:4px 0 6px }
h2.sectionhead { font-size:15px; margin:8px 0 0 }
.rbnone { padding:10px 14px }
/* ---------------------------------------------------------------- setting up (setup.js): sites, their checklists, the tag picker, configuration as text */
.addsite .addsiterow { display:flex; gap:12px 24px; align-items:flex-end; justify-content:space-between; flex-wrap:wrap }
.addsite h2 { margin:0 0 4px } .addsite p { margin:0; max-width:62ch }
.addsite .row input { width:260px }
.setupsites { display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 380px), 1fr)); margin:12px 0 }
.setupsite { text-decoration:none; color:inherit; display:grid; gap:8px; align-content:start }
.setupsite:hover { border-color:var(--strong-border) }
.setupsitehead { display:flex; gap:8px 10px; align-items:center; flex-wrap:wrap } .setupsitehead h2 { margin:0; font-size:17px }
.checkmini { list-style:none; margin:0; padding:0; display:grid; gap:4px; font-size:13px }
.checkmini li, .checklist li { display:flex; gap:10px; align-items:flex-start }
.checklist .mark, .checkmini .mark { flex:none; width:20px; height:20px; border-radius:50%; display:inline-grid; place-items:center; font-size:12px; font-weight:700;
  border:1.5px solid var(--muted); color:var(--muted); margin-top:1px }
.checkmini .mark { width:16px; height:16px; font-size:10px }
:is(.checklist, .checkmini) li.done .mark { background:var(--good); border-color:var(--good); color:#fff }
:is(.checklist, .checkmini) li.trouble .mark { background:var(--crit); border-color:var(--crit); color:#fff }
:is(.checklist, .checkmini) li.info .mark { border-style:dotted; font-style:italic }
.checkmini li.trouble { color:var(--crit) }
.backlink { display:inline-block; margin:2px 0 6px }
.setuphead .pagehead { margin-bottom:2px } .sitetitle { margin:0; font-size:22px } .siteline { margin:0 0 14px }
a.button, label.button { display:inline-flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--border); border-radius:8px; min-height:34px;
  padding:0 12px; color:var(--ink); text-decoration:none; cursor:pointer; font-size:14px }
a.button:hover, label.button:hover { background:var(--raise) }
.checklist { list-style:none; margin:8px 0 0; padding:0; display:grid }
.checklist li { padding:10px 0; border-top:1px solid var(--border); align-items:center } .checklist li:first-child { border-top:0 }
.checklist li .what { flex:1; min-width:0 } .checklist li .what b { font-weight:600 }
.checklist li.done .what b { font-weight:500 } .checklist li.quiet .what { color:var(--ink2) }
.checklist li.trouble .what b { color:var(--crit) }
.checklist li > button { flex:none }
h3.cardtitle { margin:0; font-size:15px }
.setuppanels { display:grid; gap:12px; margin:12px 0 } .setuppanels > div:empty { display:none }
.setuppanel h3 { margin:0; font-size:15px }
.panelhead { display:flex; gap:8px; align-items:center; margin-bottom:8px }
.install { display:grid; gap:10px } .install p { margin:0 }
.cmdrow.two, .install .cmdrow { grid-template-columns:minmax(0,1fr) auto; margin-top:0 }
.install details pre { margin-top:6px }
.waitline { display:flex; gap:8px; align-items:center; padding:10px 12px; border-radius:10px; background:var(--raise); font-size:13.5px }
.waitline .dot { margin:0 } .waitline .dot.wait { background:var(--warn); animation:waitpulse 1.4s ease-in-out infinite }
.waitline.heard { background:color-mix(in srgb, var(--good) 14%, var(--surface)) }
@keyframes waitpulse { 50% { opacity:.3 } }
@media (prefers-reduced-motion: reduce) { .waitline .dot.wait { animation:none } }
.addplc { align-items:flex-end } .addplc .addplcgo { flex:none }
.tagpicker { display:grid; gap:10px }
.tagbar { margin:0 } .tagbar input[type=search] { width:240px }
.tagpick { border:1px solid var(--border); border-radius:10px; max-height:min(60vh, 560px); overflow:auto; background:var(--surface) }
.tagroup { border-top:1px solid var(--border) } .tagroup:first-child { border-top:0 }
.taghead { display:flex; gap:10px; align-items:center; padding:8px 12px; background:var(--raise); position:sticky; top:0; z-index:1; cursor:pointer }
.taghead input, .tagname input { width:18px; height:18px; min-height:auto; flex:none }
.tagrow { display:grid; grid-template-columns:minmax(0, 15em) minmax(0, 1fr); gap:4px 12px; align-items:center; padding:6px 12px; border-top:1px solid var(--border) }
.tagrow.on { background:color-mix(in srgb, var(--accent) 6%, var(--surface)) }
.tagrow.done { color:var(--muted) }
.tagname { display:flex; gap:8px; align-items:center; min-width:0; cursor:pointer }
.tagname .mono { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px }
.tagname small { color:var(--muted); font-size:11px; flex:none }
.tagedit { display:grid; grid-template-columns:minmax(0, 2.2fr) minmax(0, .8fr) minmax(0, 1.2fr); gap:6px } .tagedit input { min-height:32px; padding:3px 8px; width:100% }
.tagguess { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.pickfoot { align-items:center } .pickfoot small { flex:1 1 220px }
@media (max-width:700px) {
  .tagrow { grid-template-columns:1fr } .tagedit { grid-template-columns:1fr 1fr } .tagedit input:first-child { grid-column:1 / -1 }
  .tagbar input[type=search] { width:100%; flex:1 1 100% } .addsite .row input { width:100%; flex:1 1 100% }
}
.pickerdialog { width:min(980px, calc(100vw - 24px)) } .pickerdialog .dbody { display:grid; gap:10px; padding:16px 18px }
.equiplist { display:grid; gap:6px; margin:8px 0 12px }
.equiprow { display:grid; grid-template-columns:auto 9em minmax(0, 16em) minmax(0, 1fr); gap:6px 10px; align-items:center; padding:6px 0; border-top:1px solid var(--border) }
.equiprow input[type=checkbox] { width:18px; height:18px; min-height:auto }
.equiprow .kind { font-size:12.5px; color:var(--ink2) } .equiprow small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
@media (max-width:700px) { .equiprow { grid-template-columns:auto minmax(0, 1fr) } .equiprow small, .equiprow .kind { grid-column:2 } }
.donelist { margin:8px 0; padding-left:18px; display:grid; gap:4px } .donelist li.failed { color:var(--crit) }
.readings td.num { white-space:nowrap }
.configcard { display:grid; gap:10px } .configcard > p { margin:0 }
.configtext { width:100%; min-height:min(60vh, 560px); font:12.5px/1.5 ui-monospace, Menlo, monospace; white-space:pre; overflow:auto; resize:vertical; tab-size:2 }
.filebtn input[type=file] { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none }
.filebtn { position:relative }
.planresult:not(:empty) { display:grid; gap:8px } .planresult p { margin:0 }
table.plan td.ink2 { font-size:12.5px }
.planlist ul { max-height:240px; overflow:auto; margin:6px 0; padding-left:18px; font-size:12.5px }
/* People: one form, one sheet, and everyone against every permission */
.listchips { display:flex; gap:6px 14px; flex-wrap:wrap } .chipcheck { font-size:13.5px; color:var(--ink) }
.addperson .listchips:empty { display:none }
table.permtable th { white-space:normal; vertical-align:bottom; font-size:11.5px; min-width:7em; max-width:9em }
table.permtable td.c { text-align:center } table.permtable td.c input { width:18px; height:18px; min-height:auto }
table.permtable td.changed { background:color-mix(in srgb, var(--warn) 14%, transparent) }
table.permtable th:first-child, table.permtable td:first-child { position:sticky; left:0; background:var(--surface); z-index:2 }
.sheettitle { margin:6px 0 0; font-size:14px }
/* Callouts: escalation in a list's editor, and who is called for what */
.escrow { display:flex; gap:6px 8px; align-items:center; flex-wrap:wrap; font-size:13.5px } .escrow input[type=number] { width:5.5em } .escrow select { max-width:100% }
table.cover td, table.cover th { vertical-align:top } table.cover th:not(:first-child) { min-width:9em }
.covercell.clickable { cursor:pointer } .covercell.clickable:hover { background:var(--raise) }
.covercell.gap { background:color-mix(in srgb, var(--crit) 7%, transparent) }
td.main.escalation { padding-left:24px }
/* ---------------------------------------------------------------- navigation and everyday use (2026-10-13)
   What needs attention on the Overview, a signal opened over any page, whether everything is reporting, the search's
   footer, a note with an acknowledgment, the logbook's alarms. */
.attention { display:grid; gap:6px; margin:-4px 0 18px }
.attention:empty { display:none }
.att { display:flex; align-items:center; gap:12px; padding:9px 10px 9px 12px; border:1px solid var(--border); border-left:3px solid var(--bc, var(--border));
  border-radius:0 10px 10px 0; background:var(--surface); text-decoration:none; color:inherit; min-height:52px; text-align:left; width:100%; font:inherit; white-space:normal }
button.att { justify-content:flex-start; cursor:pointer } button.att:hover, a.att:hover { background:var(--raise) }
.att.p1 { --bc:var(--prio-1, var(--crit)) } .att.p2 { --bc:var(--prio-2, var(--serious)) } .att.p3 { --bc:var(--prio-3, var(--warn)) } .att.p4 { --bc:var(--prio-4, var(--muted)) }
.att.lost { --bc:var(--crit); border-left-style:dashed }
.att.quiet { border-left-style:dashed } .att.quiet .ic { color:var(--muted); background:none; border:1.5px solid var(--muted) }
.att.more { border-left-color:var(--border); color:var(--ink2); min-height:40px }
.att .at { flex:1; min-width:0; display:flex; flex-direction:column; text-decoration:none; color:inherit }
a.at:hover b { text-decoration:underline; text-underline-offset:3px }
.att .at b { font-weight:620; overflow-wrap:anywhere } .att .at small { color:var(--ink2); font-size:12.5px }
.att .go { color:var(--muted); font-size:18px } .att > button { flex:none }
button.figure.opens { all:unset; display:flex; flex-direction:column; min-width:0; cursor:pointer; border-radius:8px; padding:2px 4px; margin:-2px -4px }
button.figure.opens:hover { background:var(--raise) } button.figure.opens:focus-visible { outline:2px solid var(--accent) }
.siteplcs { display:flex; flex-wrap:wrap; gap:6px; margin-left:auto } .siteplcs .chip { text-decoration:none; font-size:12.5px; color:var(--ink2) }
.siteplcs .chip:hover { background:var(--raise); color:var(--ink) }
.trend.focused { box-shadow:inset 3px 0 0 var(--accent) } .rrow.focus .rn { color:var(--ink); font-weight:620 }
.rrow { cursor:pointer }

.quicklook { width:min(680px, calc(100vw - 24px)) }
.qnow { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap }
.qv { font-size:34px; font-weight:650; letter-spacing:-.02em; line-height:1.1 } .qv.stale { color:var(--muted) }
.qq { font-size:12.5px; color:var(--ink2) } .qq.bad { color:var(--crit) }
.qtag { margin-left:auto; color:var(--muted); font-size:12px }
.quicklook .qtrend { padding:0; border:0 } .quicklook .qtrend .trendhead { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px }
.quicklook .qtrend .seg button { min-height:28px; padding:0 9px }
.quicklook .trendbody { height:200px }
.qcontrol h3, .qnotes h3 { margin:0 0 8px }
.qcontrol .control { border:1px solid var(--border); border-radius:10px; padding:10px 12px }
.qnotes:empty { display:none }

.reporting { width:min(560px, calc(100vw - 24px)) }
.repsite h3 { margin:0 0 6px; display:flex; align-items:center; gap:6px } .repsite h3 small { color:var(--muted); font-weight:450 }
.repplc { display:flex; align-items:center; gap:10px; padding:8px 6px; border-top:1px solid var(--border); text-decoration:none; color:inherit }
.repplc:hover { background:var(--raise) }
.repplc .dot { margin:0; flex:none } .repplc.good .dot { background:var(--good) } .repplc.warn .dot { background:var(--warn) }
.repplc.crit .dot { background:var(--crit) } .repplc.idle .dot { background:transparent; border:1.5px solid var(--muted) }
.repplc .rn { flex:1; min-width:0; display:flex; flex-direction:column } .repplc .rn small { color:var(--ink2); font-size:12.5px; overflow-wrap:anywhere }
.repplc .go { color:var(--muted) }
button.hudlive { border:0; background:none; min-height:34px; padding:0 6px; border-radius:8px; font:inherit; font-size:12.5px }
button.hudlive:hover { background:var(--raise) }
button.phonewatch { border:0; background:none; min-height:40px; padding:0 8px; font:inherit; font-size:12.5px; color:var(--crit); font-weight:600 }

.pfoot { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; padding:8px 14px; border-top:1px solid var(--border); color:var(--muted); font-size:12px }
.pfoot kbd { font-size:11px }
.prow .pspan { color:var(--accent); font-size:12px; font-weight:600 } .prow .pkey { margin-left:6px }
.prow .pv { white-space:nowrap }
@media (max-width:760px) { .pfoot { display:none } }

.sheetacts { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:4px 4px 10px; border-bottom:1px solid var(--border); margin-bottom:6px }
.sheetacts button { min-height:48px; justify-content:flex-start; gap:10px } .sheetacts .dot { margin:0 }
.sheetacts button:only-child { grid-column:1 / -1 }

.sitechip.compact { padding:0 9px 0 8px; gap:6px } .sitechip.compact .sname { max-width:12ch }
.sitechip.compact .sword { font-variant-numeric:tabular-nums; font-weight:650 }

.detailacts .acknote { display:flex; flex-direction:column; gap:4px; flex:1 1 260px; min-width:0 }
.detailacts .acknote input[type=text] { width:100% } .detailacts .acknote .check { color:var(--ink2) }
.detailacts { align-items:flex-start }
.momenthead { display:flex; align-items:center; gap:8px } .momenthead .rangepick { min-height:28px }
.dprio a { color:inherit; text-underline-offset:3px }

.logalarm { display:flex; align-items:baseline; gap:10px; padding:7px 0; border-top:1px solid var(--border); font-size:13px; color:var(--ink2) }
.logalarm .ic { transform:scale(.8) } .logalarm .la { flex:1; min-width:0 } .logalarm .la b { color:var(--ink); font-weight:560 }
.logalarm .la small { color:var(--muted) } .logalarm .lacomment { color:var(--ink) }
.signalchip { min-height:26px; font-size:12.5px; padding:0 10px; border-radius:999px; color:var(--ink2) }
.noteabout { display:flex; align-items:center; gap:6px; flex-wrap:wrap; color:var(--ink2); font-size:13px }
table.keys { border-collapse:collapse; width:100% } table.keys td { padding:5px 8px 5px 0; vertical-align:top; border-top:1px solid var(--border) }
table.keys td:first-child { white-space:nowrap; color:var(--muted) }
.logrun { border-top:1px solid var(--border); padding:7px 0; font-size:13px; color:var(--ink2) }
.logrun summary { cursor:pointer; display:flex; gap:10px; align-items:baseline; list-style:none } .logrun summary::-webkit-details-marker { display:none }
.logrun summary::before { content:"▸"; color:var(--muted); width:10px } .logrun[open] summary::before { content:"▾" }
.logrun[open] summary { margin-bottom:4px } .logrun .logalarm { padding-left:18px }
dialog.quicklook:focus, dialog.reporting:focus, dialog.faceplate:focus { outline:none }
div.figure.opens { cursor:pointer; border-radius:8px } div.figure.opens:hover .fv { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px }