/* 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;
  --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;
  }
}
: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;
}

/* ---------------------------------------------------------------- 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.p2 { border-left-color:var(--serious) } .strip.p3 { border-left-color:var(--warn) } .strip.p4 { border-left-color: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(--crit) } .ic.p2 { background:var(--serious) } .ic.p3 { background:var(--warn); color:#0b0b0b } .ic.p4 { background: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 }

/* ---------------------------------------------------------------- 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 }
.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 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) }
.mpin.placing .mdots { outline:2px dashed var(--accent); outline-offset:2px; cursor:grab }
.mapbox.placing .leaflet-container, .mapbox.placing { cursor:crosshair }
.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 }
.placebar { position:absolute; left:0; right:0; bottom:0; min-height:30px; z-index:1000; display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:2px 0 }
.placebar select { max-width:200px; min-height:28px; height:28px; padding:0 6px; font-size:12.5px } .placebar button { min-height:28px; height:28px; font-size:12.5px; padding:0 10px }
.placebar .hint { color:var(--ink2); font-size:12px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
@container (max-width:380px) { .placebar .hint { display:none } }
.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% }

/* 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 { border-color:var(--crit); animation:unacked 1s ease-in-out infinite }
@keyframes unacked {
  0%, 100% { box-shadow:0 0 0 1px var(--crit), 0 0 0 0 color-mix(in srgb, var(--crit) 0%, transparent) }
  50% { box-shadow:0 0 0 2px var(--crit), 0 0 18px 4px color-mix(in srgb, var(--crit) 45%, transparent); background:color-mix(in srgb, var(--crit) 6%, var(--surface)) }
}
@media (prefers-reduced-motion: reduce) { .widget.unacked { animation:none; box-shadow:0 0 0 2px var(--crit) } }
.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 }
.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 }