/* CoreSCADA. An instrument, not a brochure: readings and equipment state lead,
   colour 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 coloured from, by name: each theme gives a name its own shade */
  --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 }
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 } .phonebar .brand .mark { width:24px; height:24px }
  .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 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)) }
.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;
  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; font-size:12.5px; color:var(--ink2) }
.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 }
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; gap:14px }
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 }
.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:720px) { .cardbody { grid-template-columns:minmax(0, 1fr) } }
.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 }
.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 }
.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 }
.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(190px, 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 }
.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) 150px 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) 150px; 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:16px; max-height:calc(100vh - 32px); display:flex; flex-direction:column; gap:8px; background:var(--surface);
  border:1px solid var(--border); border-radius:12px; padding:12px; box-shadow:var(--shadow) }
.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 }
.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 .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 }
.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 {
  .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-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 }

/* 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 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) }
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; align-items:center; gap:10px; font-size:13px }
.entryhead .chip { min-height:22px; text-decoration:none }
.entry p { margin:4px 0 0; white-space:pre-wrap; max-width:80ch }
.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 auto; min-width:0; overflow:hidden; text-overflow:ellipsis }
.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 } .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 }
.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 } }

/* 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 { 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) }
.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 }
.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:10px 0 0 }
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:16px }
@media (max-width:760px) { .toast.lasting { top:auto; bottom:calc(84px + env(safe-area-inset-bottom)) } }
.strip.back { border-left-style:dashed } .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:color-mix(in srgb, var(--surface) 92%, transparent); box-shadow:var(--shadow); color:var(--ink); font-size:13.5px; text-align:center }
.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 }

/* 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:100%; gap:8px; overflow-x:auto; scrollbar-width:none; margin:4px -16px 0; padding:2px 16px 6px; 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% }
.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 { 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 }
.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 }

/* colours chosen by name, and the setpoints of a measured signal */
.colourpick { display:inline-flex; align-items:center; gap:8px }
.colourpick .swatch { width:16px; height:16px; border-radius:5px; background:var(--c, var(--muted)); border:1px solid var(--border); flex:none }
.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:.35; 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) }

/* choosing a place on a map */
.pickbody { min-width:min(92vw, 720px) }
.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 }
.widgetcolours { display:grid; gap:6px; margin-top:12px }
.widgetcolours .sub { font-size:11px; letter-spacing:.08em; color:var(--muted) }
.widgetcolour { display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.widgetcolour .nm { min-width:140px; font-weight:600; font-size:13px }

/* a signal's setpoints as a strip: the bands in their colours, 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) }

/* ---------------------------------------------------------------- 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 }
.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: grey lines, running dark, stopped hollow, colour 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)) }
.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"] { fill:var(--surface) !important }
.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) }

/* ---------------------------------------------------------------- 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:none; min-width:0 }
.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 .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) }
@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 } }
@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:2px; right:0; min-width:18px; height:18px; font-size:10.5px }
body.railmin .railtoggle { align-self:center; margin:0 } body.railmin .railtoggle .i { transform:scaleX(-1) }
.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 { 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:110px }
.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 }
.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 } }
.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) }