/* KOTE Atlas web app. Black / white / KOTE green (#5CB85C). Light and dark themes; no external resources. */
@font-face { font-family: "Inter"; src: url(fonts/Inter-Regular.woff) format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url(fonts/Inter-Medium.woff) format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url(fonts/Inter-SemiBold.woff) format("woff"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url(fonts/InterDisplay-SemiBold.woff) format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url(fonts/InterDisplay-Bold.woff) format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(fonts/IBMPlexMono-Regular.woff) format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(fonts/IBMPlexMono-Bold.woff) format("woff"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light;
  --f: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fd: "Inter Display", "Inter", "Segoe UI", system-ui, sans-serif;
  --fm: "Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --green: #5CB85C; --green-ink: #2C7A2F; --green-soft: #E4F2E4; --green-line: #A9D7A9;
  --bg: #EFF2EF; --surface: #FFFFFF; --surface-2: #F6F8F6; --line: #DCE2DC; --line-2: #C2CBC3;
  --ink: #111713; --ink-2: #2C352F; --muted: #5B675F; --faint: #8B968E;
  --warn: #9A5B00; --warn-fill: #E6A23C; --warn-soft: #FCF1DC;
  --bad: #B3261E; --bad-fill: #D9473B; --bad-soft: #FBE7E5;
  --off: #8B958E; --off-soft: #ECEFEC;
  --rail: #000; --rail-ink: #F4F7F4; --rail-muted: #8E9A92; --rail-hi: #16201B; --rail-line: #1F2A23;
  --focus: 0 0 0 3px rgba(92, 184, 92, .45);
  --shadow: 0 1px 2px rgba(17, 23, 19, .06), 0 8px 24px -12px rgba(17, 23, 19, .18);
  --r: 10px; --r-s: 6px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --green-ink: #7FCB7F; --green-soft: rgba(92, 184, 92, .14); --green-line: #2F5B33;
  --bg: #090C0A; --surface: #16201B; --surface-2: #1B2721; --line: #26342C; --line-2: #34463B;
  --ink: #EAF0EB; --ink-2: #C9D3CC; --muted: #97A49B; --faint: #6E7B72;
  --warn: #F0B264; --warn-soft: rgba(230, 162, 60, .14);
  --bad: #FF8A80; --bad-soft: rgba(217, 71, 59, .16);
  --off: #79847C; --off-soft: rgba(139, 149, 142, .14);
  --rail-hi: #16201B; --rail-line: #1A241E;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -14px rgba(0, 0, 0, .7);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --green-ink: #7FCB7F; --green-soft: rgba(92, 184, 92, .14); --green-line: #2F5B33;
    --bg: #090C0A; --surface: #16201B; --surface-2: #1B2721; --line: #26342C; --line-2: #34463B;
    --ink: #EAF0EB; --ink-2: #C9D3CC; --muted: #97A49B; --faint: #6E7B72;
    --warn: #F0B264; --warn-soft: rgba(230, 162, 60, .14);
    --bad: #FF8A80; --bad-soft: rgba(217, 71, 59, .16);
    --off: #79847C; --off-soft: rgba(139, 149, 142, .14);
    --rail-hi: #16201B; --rail-line: #1A241E;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -14px rgba(0, 0, 0, .7);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font: 400 14.5px/1.5 var(--f); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
h1, h2, h3, h4 { font-family: var(--fd); font-weight: 600; letter-spacing: -0.015em; margin: 0; color: var(--ink); }
h1 { font-size: 30px; line-height: 1.15; }
h2 { font-size: 19px; line-height: 1.3; }
h3 { font-size: 15.5px; line-height: 1.35; font-family: var(--f); letter-spacing: 0; }
p { margin: 0 0 .6em; }
a { color: var(--green-ink); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
code, .mono { font-family: var(--fm); font-size: .92em; }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 13px; }
.nowrap { white-space: nowrap; }
.grow { flex: 1; min-width: 0; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stack > * + * { margin-top: 16px; }
[hidden] { display: none !important; }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; }

/* ------------------------------------------------------------------ buttons and inputs */
.btn { display: inline-flex; align-items: center; gap: 8px; justify-content: center; font: 500 14px/1 var(--f); color: var(--ink); background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-s); padding: 9px 14px; min-height: 38px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .12s, border-color .12s; }
.btn:hover { background: var(--surface-2); border-color: var(--muted); }
.btn.primary { background: var(--green); border-color: var(--green); color: #000; font-weight: 600; }
.btn.primary:hover { background: #6CC46C; }
.btn.dark { background: #000; color: #fff; border-color: #000; }
:root[data-theme="dark"] .btn.dark { background: var(--ink); color: #000; border-color: var(--ink); }
.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.btn.danger.solid { background: var(--bad-fill); border-color: var(--bad-fill); color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.btn.sm { min-height: 30px; padding: 6px 10px; font-size: 13px; }
.btn.lg { min-height: 46px; padding: 12px 22px; font-size: 15.5px; }
.btn[disabled], .btn.busy { opacity: .55; cursor: not-allowed; }
.btn.busy { cursor: progress; }
.btn .spin { width: 14px; height: 14px; }
.btn-group { display: inline-flex; flex-wrap: wrap; gap: 8px; }

.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field > label, .field > .label { font-weight: 600; font-size: 13.5px; color: var(--ink-2); }
.field .hint { font-size: 12.5px; color: var(--muted); }
.field .err { font-size: 13px; color: var(--bad); }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=tel], input[type=url], input[type=datetime-local], input[type=number], input[type=time], input[type=date], input:not([type]), select, textarea {
  font: 400 14.5px/1.4 var(--f); color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-s); padding: 9px 11px; min-height: 40px; width: 100%; }
textarea { min-height: 90px; resize: vertical; }
select { appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green); box-shadow: var(--focus); }
input.bad, select.bad { border-color: var(--bad-fill); }
input::placeholder, textarea::placeholder { color: var(--faint); }
.inline-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 16px; align-items: start; }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; margin-bottom: 12px; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--green); flex: none; }
.check b { display: block; font-weight: 600; }
.check span.muted { display: block; font-size: 13px; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { width: 42px; height: 24px; border-radius: 99px; background: var(--line-2); position: relative; transition: background .15s; flex: none; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s; }
.switch input:checked + .track { background: var(--green); }
.switch input:checked + .track::after { transform: translateX(18px); }
.switch input:focus-visible + .track { box-shadow: var(--focus); }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-s); overflow: hidden; }
.seg button { font: 500 13px var(--f); background: var(--surface); color: var(--muted); border: 0; padding: 6px 12px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line-2); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }

/* ------------------------------------------------------------------ app shell */
.shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; background: linear-gradient(to right, var(--rail) 240px, transparent 240px); }
.rail { background: var(--rail); color: var(--rail-ink); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; padding: 20px 14px 14px; gap: 6px; z-index: 20; }
.rail .brand { display: flex; align-items: flex-end; gap: 10px; padding: 2px 8px 18px; text-decoration: none; color: inherit; }
.rail .brand img { height: 30px; width: auto; display: block; }
.rail .brand span { font: 600 15px/1 var(--fd); letter-spacing: .01em; color: var(--rail-ink); padding-bottom: 2px; }
.rail .org { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: var(--rail-hi); color: var(--rail-ink); border: 1px solid var(--rail-line);
  border-radius: 8px; padding: 9px 10px; font: 500 13.5px var(--f); cursor: pointer; margin-bottom: 14px; }
.rail .org .on { width: 26px; height: 26px; border-radius: 6px; background: var(--green); color: #000; display: grid; place-items: center; font: 700 12px var(--fd); flex: none; }
.rail .org .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail .org small { display: block; color: var(--rail-muted); font-size: 11.5px; }
.rail nav { display: grid; gap: 2px; }
.rail nav a { display: flex; align-items: center; gap: 11px; color: #C7D0C9; text-decoration: none; padding: 9px 10px; border-radius: 7px; font-weight: 500; position: relative; }
.rail nav a:hover { background: #0F1612; color: #fff; }
.rail nav a[aria-current="page"] { background: var(--rail-hi); color: #fff; }
.rail nav a[aria-current="page"]::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--green); }
.rail nav a[aria-current="page"] svg.i { color: var(--green); }
.rail nav .sep { height: 1px; background: var(--rail-line); margin: 10px 4px; }
.rail .count { margin-left: auto; font: 600 11.5px var(--f); color: #000; background: var(--green); border-radius: 99px; padding: 1px 7px; }
.rail .count.bad { background: var(--bad-fill); color: #fff; }
.rail .foot { margin-top: auto; display: grid; gap: 6px; border-top: 1px solid var(--rail-line); padding-top: 12px; }
.rail .me { display: flex; gap: 10px; align-items: center; color: inherit; text-decoration: none; padding: 6px 8px; border-radius: 7px; }
.rail .me:hover { background: #0F1612; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: #2A3830; color: #fff; display: grid; place-items: center; font: 600 12px var(--f); flex: none; }
.rail .me .grow div { font-weight: 500; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail .me small { color: var(--rail-muted); font-size: 11.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail .rail-tools { display: flex; gap: 4px; }
.rail .rail-tools button { flex: 1; background: transparent; color: var(--rail-muted); border: 1px solid var(--rail-line); border-radius: 7px; padding: 6px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; justify-content: center; font: 500 12px var(--f); }
.rail .rail-tools button:hover { color: #fff; border-color: #3A4A40; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 14px 32px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 10; }
.topbar .menu { display: none; }
.search-btn { display: flex; align-items: center; gap: 10px; width: min(460px, 100%); background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; color: var(--muted);
  padding: 8px 10px 8px 12px; font: 400 14px var(--f); cursor: pointer; text-align: left; }
.search-btn:hover { border-color: var(--muted); }
.search-btn kbd { margin-left: auto; }
kbd { font: 500 11.5px var(--f); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; color: var(--muted); background: var(--surface-2); }
.live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--off); }
.live.on::before { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 25%, transparent); animation: beat 2.4s ease-in-out infinite; }
.live.retry::before { background: var(--warn-fill); }
@keyframes beat { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--green) 0%, transparent); } }

.page { padding: 28px 32px 64px; max-width: 1360px; width: 100%; }
.page-h { display: flex; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.page-h .t { flex: 1; min-width: 260px; }
.page-h .t p { margin: 6px 0 0; color: var(--muted); max-width: 70ch; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }

/* ------------------------------------------------------------------ panels and grids */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.panel > .ph { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.panel > .ph h2 { font-size: 16px; }
.panel > .ph .muted { font-size: 13px; }
.panel > .pb { padding: 18px; }
.panel > .pb.flush { padding: 0; }
.cols { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cols.main-side { grid-template-columns: minmax(0, 1fr) 380px; }
.cols.side-main { grid-template-columns: 300px minmax(0, 1fr); }
.mt { margin-top: 20px; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 0; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* status: the LED dot is the unit of meaning everywhere */
.led { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--off); flex: none; }
.led.ok { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent); }
.led.warn { background: var(--warn-fill); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn-fill) 22%, transparent); }
.led.bad { background: var(--bad-fill); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad-fill) 22%, transparent); }
.led.offline { background: transparent; border: 2px solid var(--off); }
.led.unknown { background: transparent; border: 2px dashed var(--off); }
.pill { display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px/1 var(--f); padding: 5px 10px 5px 8px; border-radius: 99px; background: var(--off-soft); color: var(--muted); white-space: nowrap; }
.pill.ok { background: var(--green-soft); color: var(--green-ink); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill .led { box-shadow: none; width: 8px; height: 8px; }
.tag { display: inline-block; font: 500 12px/1.5 var(--f); padding: 1px 8px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); }
.role { font: 600 12px/1.5 var(--f); padding: 1px 8px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line); text-transform: capitalize; }
.role.owner { background: #000; color: #fff; border-color: #000; }
:root[data-theme="dark"] .role.owner { background: var(--ink); color: #000; }
.role.admin { background: var(--green-soft); color: var(--green-ink); border-color: var(--green-line); }

/* ------------------------------------------------------------------ fleet overview */
.headline { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.headline > a, .headline > div { padding: 16px 18px 14px; text-decoration: none; color: inherit; border-left: 1px solid var(--line); display: block; min-width: 0; }
.headline > :first-child { border-left: 0; }
.headline > a:hover { background: var(--surface-2); }
.headline .v { font: 700 34px/1.05 var(--fd); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 6px; }
.headline .v small { font: 500 14px var(--f); color: var(--muted); letter-spacing: 0; }
.headline .l { color: var(--muted); font-size: 13px; margin-top: 4px; }
.headline .v.bad { color: var(--bad); } .headline .v.warn { color: var(--warn); } .headline .v.ok { color: var(--green-ink); }

/* the fleet bus: every controller is a node on its site's line (after the KOTE logo's O on a line) */
.bus-wrap { background: #000; color: #fff; border-radius: var(--r); padding: 22px 24px 18px; margin-bottom: 20px; position: relative; overflow: hidden; }
:root[data-theme="dark"] .bus-wrap { border: 1px solid var(--line); }
.bus-top { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.bus-top h2 { color: #fff; font-size: 22px; }
.bus-top .say { color: #AEB9B1; font-size: 14px; }
.bus-top .say b { color: #fff; font-weight: 600; }
.bus { display: flex; gap: 0; overflow-x: auto; padding: 6px 2px 4px; scrollbar-width: thin; }
.bus .bseg { flex: 1 1 auto; min-width: 120px; padding-right: 26px; position: relative; }
.bus .bseg .line { height: 30px; position: relative; display: flex; align-items: center; gap: 14px; padding: 0 10px 0 4px; }
.bus .bseg .line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: #3A463E; }
.bus .bseg:last-child .line::after { content: ""; position: absolute; right: -2px; top: calc(50% - 5px); border: 5px solid transparent; border-left: 7px solid #3A463E; border-right: 0; }
.bus .bseg .line::before { left: -4px; }
.bus .bseg:first-child .line::before { left: 0; }
.bus .node { width: 20px; height: 20px; border-radius: 50%; position: relative; z-index: 1; background: #000; border: 3px solid var(--green); display: block; text-decoration: none; flex: none; transition: transform .12s; }
.bus .node:hover, .bus .node:focus-visible { transform: scale(1.25); }
.bus .node.ok { border-color: var(--green); }
.bus .node.ok::after { content: ""; position: absolute; left: -7px; right: -7px; top: 50%; height: 3px; margin-top: -1.5px; background: var(--green); border-radius: 2px; }
.bus .node.warn { border-color: var(--warn-fill); }
.bus .node.bad { border-color: var(--bad-fill); background: var(--bad-fill); }
.bus .node.offline { border-color: #5E6A62; border-style: solid; background: #000; }
.bus .node.unknown { border-color: #5E6A62; border-style: dashed; }
.bus .bseg .name { font-size: 12.5px; color: #C7D0C9; margin-top: 8px; padding-left: 4px; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.bus .bseg .name a { color: inherit; text-decoration: none; }
.bus .bseg .name a:hover { color: #fff; text-decoration: underline; }
.bus .bseg .name small { color: #7D8A81; margin-left: 6px; }
.bus-key { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; font-size: 12.5px; color: #AEB9B1; }
.bus-key span { display: inline-flex; align-items: center; gap: 7px; }
.bus-key i { width: 11px; height: 11px; border-radius: 50%; border: 2.5px solid var(--green); display: inline-block; }
.bus-key i.warn { border-color: var(--warn-fill); } .bus-key i.bad { border-color: var(--bad-fill); background: var(--bad-fill); } .bus-key i.offline { border-color: #5E6A62; }
.tip { position: fixed; z-index: 60; background: var(--ink); color: var(--surface); font-size: 12.5px; padding: 6px 9px; border-radius: 6px; pointer-events: none; max-width: 280px; box-shadow: var(--shadow); }

.sites-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.site-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px 14px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 10px; min-width: 0; position: relative; }
a.site-card:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.site-card .top { display: flex; align-items: flex-start; gap: 10px; }
.site-card h3 { font-family: var(--fd); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.site-card .addr { font-size: 13px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-card .mini { display: flex; align-items: center; gap: 8px; height: 18px; position: relative; padding-left: 2px; }
.site-card .mini::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--line); }
.site-card .mini .led { position: relative; width: 12px; height: 12px; box-shadow: 0 0 0 3px var(--surface); }
.site-card .facts { display: flex; gap: 14px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.site-card .facts b { color: var(--ink); font-weight: 600; }
.site-card.worst-bad { border-top: 3px solid var(--bad-fill); }
.site-card.worst-warn { border-top: 3px solid var(--warn-fill); }
.site-card.worst-offline { border-top: 3px solid var(--off); }
.site-card.worst-ok { border-top: 3px solid var(--green); }

.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; padding: 11px 18px; border-top: 1px solid var(--line); }
.feed li:first-child { border-top: 0; }
.feed li.fresh { animation: fresh 2.4s ease-out; }
@keyframes fresh { from { background: var(--green-soft); } to { background: transparent; } }
.feed .led { margin-top: 6px; }
.feed .what { font-size: 14px; overflow-wrap: anywhere; }
.feed .what a { color: var(--ink); font-weight: 600; text-decoration: none; }
.feed .what a:hover { text-decoration: underline; }
.feed .when { font-size: 12.5px; color: var(--muted); }

/* ------------------------------------------------------------------ tables */
.tbl-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th { text-align: left; font: 600 12.5px var(--f); color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface-2); }
table.t td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
table.t tbody tr.link { cursor: pointer; }
table.t tbody tr.link:hover td { background: var(--surface-2); }
table.t td.end, table.t th.end { text-align: right; white-space: nowrap; }
table.t td small { display: block; color: var(--muted); font-size: 12.5px; }
table.t td .name { font-weight: 600; color: var(--ink); text-decoration: none; }
table.t td .name:hover { text-decoration: underline; }
.panel table.t th:first-child, .panel table.t td:first-child { padding-left: 18px; }
.panel table.t th:last-child, .panel table.t td:last-child { padding-right: 18px; }

/* ------------------------------------------------------------------ controller page */
.ctl-head { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: center; margin-bottom: 20px; position: relative; overflow: hidden; }
.ctl-head::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--off); }
.ctl-head.ok::before { background: var(--green); } .ctl-head.warn::before { background: var(--warn-fill); } .ctl-head.bad::before { background: var(--bad-fill); }
.ctl-head h1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ctl-head .meta { display: flex; gap: 6px 18px; flex-wrap: wrap; color: var(--muted); font-size: 13.5px; margin-top: 8px; }
.ctl-head .meta b { color: var(--ink); font-weight: 500; }
.ctl-head .actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; }
.tabs a, .tabs button { font: 500 14px var(--f); color: var(--muted); text-decoration: none; padding: 10px 14px; border: 0; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; }
.tabs a:hover, .tabs button:hover { color: var(--ink); }
.tabs a[aria-current="page"], .tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--green); font-weight: 600; }
.tabs .n { font-size: 12px; color: var(--muted); margin-left: 4px; }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.tile { padding: 16px 18px 12px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); min-width: 0; }
.tile:nth-child(3n+1) { border-left: 0; }
.tile:nth-child(-n+3) { border-top: 0; }
.tile .l { font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.tile .v { font: 600 26px/1.15 var(--fd); letter-spacing: -0.015em; font-variant-numeric: tabular-nums; margin-top: 4px; }
.tile .v small { font: 500 13.5px var(--f); color: var(--muted); letter-spacing: 0; margin-left: 3px; }
.tile .v.warn { color: var(--warn); } .tile .v.bad { color: var(--bad); }
.tile .s { font-size: 12.5px; color: var(--muted); margin-top: 2px; min-height: 18px; }
.spark { display: block; width: 100%; height: 44px; margin-top: 8px; overflow: visible; }
.spark .area { fill: color-mix(in srgb, var(--green) 16%, transparent); }
.spark .ln { fill: none; stroke: var(--green); stroke-width: 1.75; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.spark .ln.warn { stroke: var(--warn-fill); } .spark .area.warn { fill: color-mix(in srgb, var(--warn-fill) 16%, transparent); }
.spark .gap { fill: color-mix(in srgb, var(--off) 14%, transparent); }
.spark .dot { fill: var(--green); }
.spark-empty { height: 44px; margin-top: 8px; display: flex; align-items: center; font-size: 12.5px; color: var(--faint); border-top: 1px dashed var(--line); }

.timeline { list-style: none; margin: 0; padding: 0 18px; }
.timeline li { display: grid; grid-template-columns: 76px 16px minmax(0, 1fr); gap: 10px; padding: 10px 0; position: relative; }
.timeline li::before { content: ""; position: absolute; left: 93px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.timeline li:first-child::before { top: 18px; } .timeline li:last-child::before { bottom: calc(100% - 18px); }
.timeline .tm { font-size: 12.5px; color: var(--muted); text-align: right; padding-top: 2px; font-variant-numeric: tabular-nums; }
.timeline .led { margin-top: 6px; position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--surface); }
.timeline .day { grid-column: 1 / -1; font: 600 12.5px var(--f); color: var(--ink-2); padding: 14px 0 2px; }
.timeline li.dayrow::before { display: none; }

.peer-list { list-style: none; margin: 0; padding: 0; }
.peer-list li { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-top: 1px solid var(--line); }
.peer-list li:first-child { border-top: 0; }

.banner { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); margin-bottom: 16px; }
.banner.info { background: var(--green-soft); border-color: var(--green-line); }
.banner.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn-fill) 40%, transparent); }
.banner.bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad-fill) 40%, transparent); }
.banner > svg.i { margin-top: 2px; }
.banner .grow p:last-child { margin: 0; }

/* empty states */
.empty { text-align: center; padding: 40px 24px; color: var(--muted); max-width: 540px; margin: 0 auto; }
.empty .pic { width: 120px; height: 56px; margin: 0 auto 14px; display: block; color: var(--line-2); }
.empty h3 { font-family: var(--fd); font-size: 18px; color: var(--ink); margin-bottom: 6px; }
.empty p { margin-bottom: 16px; }

/* ------------------------------------------------------------------ dialogs, toasts, palette */
dialog { border: 0; padding: 0; border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 80px -20px rgba(0, 0, 0, .55); width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 40px); }
dialog.wide { width: min(760px, calc(100vw - 24px)); }
dialog::backdrop { background: rgba(5, 8, 6, .55); backdrop-filter: blur(2px); }
dialog[open] { animation: pop .14s ease-out; }
@keyframes pop { from { transform: translateY(6px) scale(.985); opacity: 0; } }
dialog form { display: flex; flex-direction: column; max-height: calc(100vh - 40px); }
.dh { padding: 20px 22px 6px; display: flex; gap: 12px; align-items: flex-start; }
.dh h2 { font-size: 19px; }
.dh .x { margin-left: auto; }
.db { padding: 10px 22px 6px; overflow: auto; }
.df { padding: 14px 22px 18px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 10px; }
.typed { background: var(--bad-soft); border-radius: 8px; padding: 12px 14px; margin: 6px 0 14px; }
.typed b { font-family: var(--fm); }
.toasts { position: fixed; right: 20px; bottom: 20px; display: grid; gap: 8px; z-index: 100; max-width: min(420px, calc(100vw - 40px)); }
.toast { background: #000; color: #fff; border-radius: 9px; padding: 12px 14px 12px 12px; display: flex; gap: 10px; align-items: flex-start; box-shadow: var(--shadow); font-size: 14px; animation: pop .16s ease-out; border-left: 4px solid var(--green); }
.toast.bad { border-left-color: var(--bad-fill); }
:root[data-theme="dark"] .toast { background: #F4F7F4; color: #000; }

.palette { width: min(640px, calc(100vw - 24px)); margin-top: 12vh; }
.palette .pi { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.palette .pi input { border: 0; box-shadow: none; padding: 4px 0; font-size: 17px; min-height: 0; background: transparent; }
.palette ul { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow: auto; }
.palette li.g { font: 600 12px var(--f); color: var(--muted); padding: 10px 10px 4px; }
.palette li.o { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 7px; cursor: pointer; }
.palette li.o small { color: var(--muted); margin-left: auto; font-size: 12.5px; }
.palette li.o[aria-selected="true"] { background: var(--green-soft); }
.palette .none { padding: 18px; color: var(--muted); text-align: center; }
.palette .pf { display: flex; gap: 14px; padding: 9px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }

.spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; animation: spin .8s linear infinite; display: inline-block; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { display: flex; gap: 12px; align-items: center; color: var(--muted); padding: 40px 0; justify-content: center; }

/* ------------------------------------------------------------------ sign-in, setup, invitation (full-screen) */
.gate { min-height: 100vh; display: grid; grid-template-columns: minmax(340px, 5fr) minmax(0, 7fr); background: var(--surface); }
.gate .brandside { background: #000; color: #fff; padding: 40px 44px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.gate .brandside img { width: 168px; height: auto; display: block; }
.gate .brandside .prod { font: 600 15px var(--fd); color: #AEB9B1; margin-top: 10px; letter-spacing: .02em; }
.gate .brandside .big { margin-top: auto; font: 600 38px/1.08 var(--fd); letter-spacing: -0.02em; max-width: 13ch; }
.gate .brandside .big + p { color: #AEB9B1; max-width: 42ch; margin-top: 14px; }
.gate .brandside .lines { position: absolute; left: 0; right: 0; top: 34%; height: 140px; color: #26332B; pointer-events: none; }
.gate .brandside .foot { color: #6E7B72; font-size: 12.5px; margin-top: 28px; }
.gate .formside { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--bg); }
.gate .card { width: min(460px, 100%); }
.gate .card h1 { font-size: 28px; margin-bottom: 6px; }
.gate .card > p.muted { margin-bottom: 22px; }
.gate .formerr { color: var(--bad); background: var(--bad-soft); border-radius: 7px; padding: 9px 12px; font-size: 13.5px; margin-bottom: 14px; }
.otp { font: 600 26px/1 var(--fm) !important; letter-spacing: .35em; text-align: center; padding: 12px !important; }
.steps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 4px; counter-reset: s; }
.steps li { display: flex; gap: 12px; align-items: center; color: #7D8A81; font-size: 14px; padding: 6px 0; counter-increment: s; }
.steps li::before { content: counter(s); width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #3A463E; display: grid; place-items: center; font: 600 12px var(--f); flex: none; }
.steps li.now { color: #fff; font-weight: 600; }
.steps li.now::before { border-color: var(--green); color: var(--green); }
.steps li.done { color: #AEB9B1; }
.steps li.done::before { content: "✓"; background: var(--green); border-color: var(--green); color: #000; }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.choice label { border: 1.5px solid var(--line-2); border-radius: 9px; padding: 12px 14px; cursor: pointer; background: var(--surface); display: block; }
.choice label:has(input:checked) { border-color: var(--green); background: var(--green-soft); }
.choice label:has(input:focus-visible) { box-shadow: var(--focus); }
.choice input { position: absolute; opacity: 0; }
.choice b { display: block; font-size: 14.5px; }
.choice span { font-size: 12.5px; color: var(--muted); }
.qr-box { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 16px; }
.qr-box .qr { width: 176px; height: 176px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.qr-box .qr svg { width: 100%; height: 100%; display: block; }
.secret { font: 600 14px/1.5 var(--fm); letter-spacing: .06em; word-break: break-all; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; display: inline-block; }
.pw-meter { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.pw-meter i { display: block; height: 100%; width: 0; background: var(--bad-fill); transition: width .2s, background .2s; }
.fp { font: 600 13px/1.6 var(--fm); letter-spacing: .02em; word-break: break-all; }

/* claim code entry: the code is the hero of Add controller */
.claim { display: flex; align-items: center; gap: 10px; margin: 8px 0 6px; }
.claim input { font: 700 34px/1 var(--fm) !important; letter-spacing: .22em; text-transform: uppercase; text-align: center; padding: 14px 10px !important; width: 100%; max-width: 380px; border-width: 2px !important; }
.found { border: 1px solid var(--green-line); background: var(--green-soft); border-radius: var(--r); padding: 16px 18px; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; }
.found .chip { width: 56px; height: 56px; border-radius: 10px; background: #000; color: var(--green); display: grid; place-items: center; }
.found .chip svg.i { width: 28px; height: 28px; }
.wiz-steps { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.wiz-steps span { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.wiz-steps span b { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; font-size: 11.5px; }
.wiz-steps span.now { color: var(--ink); font-weight: 600; } .wiz-steps span.now b { border-color: var(--green); background: var(--green); color: #000; }
.wiz-steps span.done b { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.wiz-steps i { width: 26px; height: 1.5px; background: var(--line-2); align-self: center; }

.copyrow { display: flex; gap: 8px; }
.copyrow input { font-family: var(--fm); font-size: 13px; }
.logo-prev { width: 160px; height: 64px; border: 1px dashed var(--line-2); border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); overflow: hidden; }
.logo-prev img { max-width: 100%; max-height: 100%; }
.danger-zone { border: 1px solid color-mix(in srgb, var(--bad-fill) 40%, transparent); border-radius: var(--r); }
.danger-zone > .ph { border-bottom-color: color-mix(in srgb, var(--bad-fill) 25%, transparent); }
.danger-zone > .ph h2 { color: var(--bad); }

.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.filters .field { margin: 0; min-width: 150px; flex: 1 1 150px; }
.filters .field.wide { flex: 2 1 220px; }
.detail { font-family: var(--fm); font-size: 12px; color: var(--muted); max-width: 46ch; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ narrow screens */
@media (max-width: 1180px) {
  .headline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .headline > :nth-child(4) { border-left: 0; }
  .headline > :nth-child(n+4) { border-top: 1px solid var(--line); }
  .cols.main-side { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); background: none; }
  .rail { position: fixed; left: 0; top: 0; bottom: 0; width: 272px; transform: translateX(-100%); transition: transform .2s ease-out; }
  .rail.open { transform: none; box-shadow: 0 0 60px rgba(0,0,0,.5); }
  .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 15; }
  .topbar { padding: 10px 16px; gap: 10px; }
  .topbar .menu { display: inline-flex; }
  .search-btn kbd { display: none; }
  .page { padding: 20px 16px 48px; }
  h1 { font-size: 25px; }
  .cols, .cols.side-main { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile:nth-child(n) { border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
  .tile:nth-child(2n+1) { border-left: 0; } .tile:nth-child(-n+2) { border-top: 0; }
  .ctl-head { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .ctl-head .actions { justify-content: flex-start; }
  .gate { grid-template-columns: minmax(0, 1fr); }
  .gate .brandside { padding: 22px 20px; min-height: 0; }
  .gate .brandside .big, .gate .brandside .big + p, .gate .brandside .lines, .gate .brandside .foot { display: none; }
  .gate .brandside img { width: 110px; }
  .steps { display: flex; margin-top: 16px; gap: 6px; }
  .steps li { font-size: 0; gap: 0; padding: 0; }
  .gate .formside { align-items: flex-start; padding: 24px 16px 40px; }
  .qr-box { grid-template-columns: minmax(0, 1fr); }
  .live span { display: none; }
  table.t .hide-n { display: none; }
}
@media (max-width: 560px) {
  .headline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .headline > :nth-child(n) { border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
  .headline > :nth-child(2n+1) { border-left: 0; } .headline > :nth-child(-n+2) { border-top: 0; }
  .headline .v { font-size: 28px; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tile:nth-child(n) { border-left: 0; border-top: 1px solid var(--line); } .tile:first-child { border-top: 0; }
  .choice { grid-template-columns: minmax(0, 1fr); }
  .claim input { font-size: 26px !important; }
  table.t .hide-s { display: none; }
  .timeline li { grid-template-columns: 58px 16px minmax(0, 1fr); }
  .timeline li::before { left: 75px; }
  .bus-wrap { padding: 18px 16px 14px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print { .rail, .topbar { display: none; } .shell { display: block; } }
.db:last-child { padding-bottom: 22px; }

/* ================================================================== stage 3: alarms, notifications, history, reports, Atlas Edge */
:root { --p-critical: #D9473B; --p-high: #E07B24; --p-medium: #C99A06; --p-low: #5E87B0;
  --p-critical-soft: #FBE7E5; --p-high-soft: #FCEBDD; --p-medium-soft: #FAF2D3; --p-low-soft: #E6EEF6;
  --os-0: #2a78d6; --os-1: #eb6834; --os-2: #1baf7a; --os-3: #eda100; --os-4: #6250d6; --os-5: #e87ba4; }
:root[data-theme="dark"] { --p-critical: #FF6B5E; --p-high: #F39A4A; --p-medium: #E3BC3A; --p-low: #86AAD0;
  --p-critical-soft: rgba(255, 107, 94, .16); --p-high-soft: rgba(243, 154, 74, .15); --p-medium-soft: rgba(227, 188, 58, .14); --p-low-soft: rgba(134, 170, 208, .15);
  --os-0: #3987e5; --os-1: #d95926; --os-2: #199e70; --os-3: #c98500; --os-4: #9085e9; --os-5: #d55181; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --p-critical: #FF6B5E; --p-high: #F39A4A; --p-medium: #E3BC3A; --p-low: #86AAD0;
  --p-critical-soft: rgba(255, 107, 94, .16); --p-high-soft: rgba(243, 154, 74, .15); --p-medium-soft: rgba(227, 188, 58, .14); --p-low-soft: rgba(134, 170, 208, .15);
  --os-0: #3987e5; --os-1: #d95926; --os-2: #199e70; --os-3: #c98500; --os-4: #9085e9; --os-5: #d55181; } }
.rail .count.warn { background: var(--warn-fill); color: #000; }

/* priority chip: a shape per priority as well as a colour (never colour alone) */
.prio { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--f); padding: 4px 8px 4px 6px; border-radius: 5px; white-space: nowrap; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); }
.prio i { width: 10px; height: 10px; flex: none; background: currentColor; }
.prio.critical { background: var(--p-critical-soft); border-color: color-mix(in srgb, var(--p-critical) 40%, transparent); } .prio.critical i { color: var(--p-critical); clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 11px; }
.prio.high { background: var(--p-high-soft); border-color: color-mix(in srgb, var(--p-high) 40%, transparent); } .prio.high i { color: var(--p-high); transform: rotate(45deg) scale(.85); border-radius: 1px; }
.prio.medium { background: var(--p-medium-soft); border-color: color-mix(in srgb, var(--p-medium) 40%, transparent); } .prio.medium i { color: var(--p-medium); border-radius: 2px; }
.prio.low { background: var(--p-low-soft); border-color: color-mix(in srgb, var(--p-low) 40%, transparent); } .prio.low i { color: var(--p-low); border-radius: 50%; }
.prio.sm { font-size: 11.5px; padding: 2px 6px 2px 5px; } .prio.sm i { width: 8px; height: 8px; }
.ast { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px/1 var(--f); color: var(--muted); white-space: nowrap; }
.ast i { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--off); flex: none; }
.ast.active-unacked { color: var(--ink); font-weight: 600; } .ast.active-unacked i { background: var(--bad-fill); border-color: var(--bad-fill); animation: blink 1.1s steps(2, start) infinite; }
.ast.active-acked i { background: var(--bad-fill); border-color: var(--bad-fill); }
.ast.returned-unacked { color: var(--ink); } .ast.returned-unacked i { border-color: var(--bad-fill); animation: blink 1.1s steps(2, start) infinite; }
.ast.cleared i { border-color: var(--green); background: var(--green); }
.ast.shelved svg.i { width: 15px; height: 15px; } .ast.pending .spin { width: 11px; height: 11px; }
@keyframes blink { to { opacity: .25; } }

/* priority count strip (console header) */
.pcounts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.1fr) minmax(0, .8fr); gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 16px; }
.pc { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 16px 11px; border: 0; border-left: 1px solid var(--line); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; position: relative; min-width: 0; }
.pc:first-child { border-left: 0; }
div.pc { cursor: default; }
.pc .n { font: 700 30px/1.05 var(--fd); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--faint); }
.pc .l { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.pc.has .n { color: var(--ink); }
.pc.critical.has .n { color: var(--p-critical); } .pc.high.has .n { color: var(--p-high); }
.pc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: transparent; }
.pc.critical::before { background: var(--p-critical); } .pc.high::before { background: var(--p-high); } .pc.medium::before { background: var(--p-medium); } .pc.low::before { background: var(--p-low); }
.pc.critical .l::before, .pc.high .l::before, .pc.medium .l::before, .pc.low .l::before { content: ""; width: 9px; height: 9px; background: currentColor; }
.pc.critical .l::before { color: var(--p-critical); clip-path: polygon(50% 0, 100% 100%, 0 100%); } .pc.high .l::before { color: var(--p-high); transform: rotate(45deg) scale(.85); } .pc.medium .l::before { color: var(--p-medium); border-radius: 2px; } .pc.low .l::before { color: var(--p-low); border-radius: 50%; }
button.pc:hover { background: var(--surface-2); }
.pc[aria-pressed="true"] { background: var(--surface-2); box-shadow: inset 0 -3px 0 var(--ink); }
.pc.tot .n { color: var(--ink); } .pc.shelf .n { font-size: 24px; margin-top: 4px; }
.al-filters .seg button { padding: 9px 12px; }

/* the console list */
.al-panel { overflow: hidden; }
.al-head, .al-row { display: grid; grid-template-columns: 34px 92px 104px minmax(0, 1fr) minmax(130px, 210px) 96px 92px; gap: 12px; align-items: center; padding: 0 16px 0 12px; }
.al-head { font: 600 12.5px var(--f); color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line); min-height: 38px; }
.al-head .end, .al-row .end { text-align: right; justify-content: flex-end; }
.al-list { max-height: calc(100vh - 380px); min-height: 220px; overflow: auto; outline: none; overscroll-behavior: contain; }
.al-list:focus-visible { box-shadow: inset 0 0 0 2px var(--green); }
.al-row { min-height: 54px; border-bottom: 1px solid var(--line); cursor: pointer; position: relative; padding-top: 7px; padding-bottom: 7px; }
.al-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.al-row.critical::before { background: var(--p-critical); } .al-row.high::before { background: var(--p-high); } .al-row.medium::before { background: var(--p-medium); } .al-row.low::before { background: var(--p-low); }
.al-row.st-active-unacked.critical { background: color-mix(in srgb, var(--p-critical-soft) 55%, transparent); }
.al-row:hover { background: var(--surface-2); }
.al-row.sel { background: var(--green-soft); }
.al-row.focus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--green) 70%, transparent); }
.al-row.open { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.al-row.fresh { animation: alfresh 3s ease-out; }
@keyframes alfresh { 0%, 20% { background: color-mix(in srgb, var(--p-high) 26%, transparent); } }
.al-row.st-cleared, .al-row.shelved { color: var(--muted); } .al-row.st-cleared .al-main b, .al-row.shelved .al-main b { color: var(--muted); }
.al-cb { display: grid; place-items: center; height: 100%; cursor: pointer; }
.al-cb input { width: 17px; height: 17px; accent-color: var(--green); cursor: pointer; }
.al-main { min-width: 0; font-size: 14px; line-height: 1.35; }
.al-main b { font-family: var(--fm); font-size: 13px; font-weight: 700; }
.al-main small, .al-where small, .al-when small { display: block; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-main { overflow: hidden; } .al-main > b + * { }
.al-where { font-size: 13.5px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.al-where a { color: var(--ink); font-weight: 500; text-decoration: none; } .al-where a:hover { text-decoration: underline; }
.al-val { font-family: var(--fm); font-size: 13px; }
.al-when { text-align: right; font-size: 13.5px; }
.al-empty { text-align: center; padding: 56px 20px; color: var(--muted); }
.al-empty h3 { font: 600 19px var(--fd); color: var(--ink); margin-bottom: 6px; }
.calm { display: flex; justify-content: center; gap: 10px; margin-bottom: 14px; }
.calm i { width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--green); position: relative; }
.calm i + i::before { content: ""; position: absolute; right: 100%; top: 50%; width: 10px; height: 2px; margin-top: -1px; background: var(--green); margin-right: 3px; }
.selbar { position: sticky; bottom: 16px; z-index: 12; margin-top: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: #000; color: #fff; border-radius: 12px; padding: 10px 12px 10px 18px; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .55); animation: pop .14s ease-out; }
.selbar .btn:not(.primary) { background: #16201B; color: #fff; border-color: #2A3830; } .selbar .btn.ghost { background: transparent; border-color: transparent; color: #C7D0C9; }
:root[data-theme="dark"] .selbar { border: 1px solid var(--line-2); }
.kb-help kbd { margin: 0 2px; }

/* drawer (alarm detail) */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: var(--surface); border-left: 1px solid var(--line); box-shadow: -24px 0 60px -30px rgba(0, 0, 0, .45); z-index: 30; overflow: auto; animation: slidein .18s ease-out; }
@keyframes slidein { from { transform: translateX(30px); opacity: 0; } }
.dw-body { padding: 0 0 40px; }
.dw-h { padding: 18px 22px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 2; }
.dw-h::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.dw-h.critical::before { background: var(--p-critical); } .dw-h.high::before { background: var(--p-high); } .dw-h.medium::before { background: var(--p-medium); } .dw-h.low::before { background: var(--p-low); }
.dw-h h2 { font-size: 21px; margin: 12px 0 4px; }
.dw-pt { margin: 0 0 4px; color: var(--ink-2); }
.dw-where { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); margin-bottom: 12px; }
.dw-s { padding: 16px 22px 4px; }
.dw-s h3 { font: 600 13px var(--f); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.tsnip { width: 100%; height: auto; display: block; overflow: visible; }
.tsnip .gl { stroke: var(--line); } .tsnip .ax { font: 10.5px var(--f); fill: var(--muted); }
.tsnip .ln { fill: none; stroke: var(--os-0); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.tsnip .band { fill: var(--os-0); opacity: .14; }
.tsnip .lim { stroke: var(--bad-fill); stroke-dasharray: 5 4; } .tsnip .limt { font: 600 10.5px var(--f); fill: var(--bad); }
.tsnip .mk { stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 2 3; } .tsnip .mkt { font: 600 10.5px var(--f); fill: var(--ink-2); }
.tsnip .alz { opacity: .1; } .tsnip .alz.critical { fill: var(--p-critical); } .tsnip .alz.high { fill: var(--p-high); } .tsnip .alz.medium { fill: var(--p-medium); } .tsnip .alz.low { fill: var(--p-low); }
.tcap { margin: 6px 0 0; }
.atl { list-style: none; margin: 0; padding: 0; position: relative; }
.atl li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; padding: 0 0 14px; position: relative; }
.atl li::before { content: ""; position: absolute; left: 4px; top: 12px; bottom: -2px; width: 1.5px; background: var(--line); }
.atl li:last-child::before { display: none; }
.atl .led { margin-top: 5px; position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--surface); }
.atl .t { font-size: 13.5px; display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
.atl time { margin-left: auto; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.atl .x { font-size: 13px; color: var(--muted); }
.atl .x.cm { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; color: var(--ink); margin-top: 4px; white-space: pre-wrap; }
.dlv { list-style: none; margin: 0; padding: 0; }
.dlv li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.dlv li:first-child { border-top: 0; } .dlv .led { margin-top: 5px; }
.dlv small { display: block; color: var(--muted); font-size: 12.5px; }
.dres { font: 600 11.5px var(--f); text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.dres.sent { color: var(--green-ink); } .dres.failed { color: var(--bad); } .dres.retrying, .dres.held { color: var(--warn); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; gap: 6px; font: 500 13px var(--f); padding: 6px 11px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); }
.chip span svg.i { width: 15px; height: 15px; }
.chip input:checked + span { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.chip input:focus-visible + span { box-shadow: var(--focus); }
.chip.g input:checked + span { background: var(--green); color: #000; border-color: var(--green); }

/* menu popover */
.menu { position: absolute; z-index: 70; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow), 0 20px 50px -20px rgba(0, 0, 0, .35); padding: 6px; max-width: 380px; animation: pop .12s ease-out; }
.menu .mrow { display: flex; align-items: stretch; gap: 2px; }
.menu .mi { flex: 1; display: flex; align-items: center; gap: 10px; text-align: left; font: 500 14px var(--f); color: var(--ink); background: none; border: 0; border-radius: 7px; padding: 8px 10px; cursor: pointer; min-width: 0; }
.menu .mi small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.menu .mi:hover:not([disabled]), .menu .mi:focus-visible { background: var(--green-soft); box-shadow: none; }
.menu .mi[disabled] { color: var(--muted); cursor: default; font-weight: 400; }
.menu .md { background: none; border: 0; color: var(--muted); border-radius: 7px; padding: 0 8px; cursor: pointer; }
.menu .md:hover { color: var(--bad); background: var(--bad-soft); }
.menu .msep { height: 1px; background: var(--line); margin: 6px 4px; }

/* fleet overview: open alarms panel, site card counts */
.ov-pc { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.ov-pc a { padding: 10px 12px; text-decoration: none; color: var(--muted); font-size: 12.5px; border-left: 1px solid var(--line); border-top: 3px solid transparent; }
.ov-pc a:first-child { border-left: 0; }
.ov-pc a b { display: block; font: 700 22px/1.1 var(--fd); color: var(--faint); font-variant-numeric: tabular-nums; }
.ov-pc a.has b { color: var(--ink); } .ov-pc a.critical.has b { color: var(--p-critical); } .ov-pc a.high.has b { color: var(--p-high); }
.ov-pc a.critical { border-top-color: var(--p-critical); } .ov-pc a.high { border-top-color: var(--p-high); } .ov-pc a.medium { border-top-color: var(--p-medium); } .ov-pc a.low { border-top-color: var(--p-low); }
.ov-pc a:hover { background: var(--surface-2); }
.ov-list { list-style: none; margin: 0; padding: 0; }
.ov-list a { display: flex; gap: 10px; align-items: flex-start; padding: 10px 18px; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 13.5px; }
.ov-list li:first-child a { border-top: 0; }
.ov-list a:hover { background: var(--surface-2); }
.ov-list i { width: 10px; height: 10px; margin-top: 5px; flex: none; background: var(--p-low); border-radius: 50%; }
.ov-list .critical i { background: var(--p-critical); border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); } .ov-list .high i { background: var(--p-high); border-radius: 1px; transform: rotate(45deg) scale(.85); } .ov-list .medium i { background: var(--p-medium); border-radius: 2px; }
.ov-list .un i { animation: blink 1.1s steps(2, start) infinite; }
.ov-list b { font-family: var(--fm); font-size: 12.5px; }
.ov-list small { display: block; color: var(--muted); font-size: 12px; }
.sc-al { display: inline-flex; gap: 5px; flex-wrap: wrap; }

/* controller Points tab */
table.pts tr.grp td { background: var(--surface-2); font: 600 12.5px var(--f); color: var(--ink-2); padding-top: 7px; padding-bottom: 7px; }
table.pts td.pv { font-family: var(--fm); font-size: 13.5px; white-space: nowrap; transition: background .8s; }
table.pts td.pv.chg { animation: vchg 1.2s ease-out; }
@keyframes vchg { from { background: color-mix(in srgb, var(--green) 30%, transparent); } }
table.pts tr.open td { background: var(--surface-2); border-bottom-color: transparent; }
table.pts tr.pdet td { background: var(--surface-2); padding-top: 4px; }
.onoff { font: 600 12px var(--f); padding: 2px 8px; border-radius: 99px; background: var(--off-soft); color: var(--muted); }
.onoff.on { background: var(--green-soft); color: var(--green-ink); }
.live-v { display: inline-flex; align-items: center; gap: 7px; }
.tabs .tab-al { background: var(--warn-soft); color: var(--warn); border-radius: 99px; padding: 0 7px; font-weight: 600; }

/* notifications */
.ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.ch-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.ch-card.failing { border-color: color-mix(in srgb, var(--bad-fill) 55%, transparent); box-shadow: inset 4px 0 0 var(--bad-fill); }
.ch-card.off { opacity: .75; }
.ch-card h3 { font-family: var(--fd); font-size: 16.5px; }
.ch-ic { width: 38px; height: 38px; border-radius: 9px; background: #000; color: var(--green); display: grid; place-items: center; flex: none; }
:root[data-theme="dark"] .ch-ic { background: var(--surface-2); border: 1px solid var(--line); }
.ch-err { display: flex; gap: 8px; margin: 0; font-size: 13px; color: var(--bad); background: var(--bad-soft); border-radius: 7px; padding: 8px 10px; }
.ch-err small { display: block; color: var(--muted); }
.switch.sm .track { width: 36px; height: 20px; } .switch.sm .track::after { width: 14px; height: 14px; } .switch.sm input:checked + .track::after { transform: translateX(16px); }
.type-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.tp-b { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px; border: 1.5px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; }
.tp-b:hover:not([disabled]) { border-color: var(--green); background: var(--green-soft); }
.tp-b svg.i { width: 24px; height: 24px; color: var(--green-ink); margin-bottom: 4px; }
.tp-b span { font-size: 12.5px; color: var(--muted); }
.tp-b[disabled] { opacity: .5; cursor: not-allowed; }
.fs { border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px 6px; margin: 0 0 16px; }
.fs legend { font: 600 13px var(--f); padding: 0 6px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.og { margin-bottom: 14px; }
.oncall-now { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }
.wk { display: grid; gap: 4px; }
.wk-h { position: relative; height: 16px; margin-left: 52px; font-size: 11.5px; color: var(--muted); }
.wk-h span { position: absolute; transform: translateX(-2px); }
.wk-r { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: center; }
.wk-r b { font: 600 12.5px var(--f); color: var(--muted); }
.wk-r.today b { color: var(--ink); }
.wk-l { position: relative; height: 26px; background: repeating-linear-gradient(to right, var(--surface-2) 0, var(--surface-2) calc(25% - 1px), var(--line) calc(25% - 1px), var(--line) 25%); border-radius: 5px; }
.wk-l i { position: absolute; top: 3px; bottom: 3px; background: var(--c); border-radius: 4px; overflow: hidden; display: flex; align-items: center; }
.wk-l i span { font: 600 11px var(--f); color: #fff; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); }
.wk-l s { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); border-radius: 2px; }
.wk-key { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.wk-key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.ros, .esc-s { border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; margin-bottom: 10px; background: var(--surface-2); display: grid; gap: 8px; }
.ros-h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; flex-wrap: wrap; }
.ros-h .mins { width: 76px; min-height: 32px; padding: 4px 8px; }
.ros-d { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.day { position: relative; } .day input { position: absolute; opacity: 0; }
.day span { display: inline-block; font: 600 12px var(--f); padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); cursor: pointer; min-width: 40px; text-align: center; }
.day input:checked + span { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.day input:focus-visible + span { box-shadow: var(--focus); }
.ros-t { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font-size: 13px; color: var(--muted); }
.ros-t input { width: 112px; min-height: 34px; padding: 5px 8px; }
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rule { display: flex; gap: 10px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px 14px 8px; }
.rule.off { opacity: .7; } .rule.drag { opacity: .45; border-style: dashed; }
.rule .grip { color: var(--faint); cursor: grab; padding: 4px 2px; }
.rule .rn { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--surface); font: 700 12px var(--f); display: grid; place-items: center; flex: none; margin-top: 2px; }
.rule h3 { font-family: var(--fd); font-size: 16px; }
.flow { display: grid; gap: 6px; margin-top: 8px; font-size: 13.5px; }
.flow .fs1 { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding-left: 14px; border-left: 2px solid var(--line); }
.flow .fs1.esc { border-left-color: var(--warn-fill); }
.flow b { font-weight: 600; }
.rcp { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; padding: 1px 9px; font-size: 12.5px; }
.rcp svg.i { width: 14px; height: 14px; } .rcp.g { background: var(--green-soft); border-color: var(--green-line); } .rcp.ch { background: transparent; }

/* account */
.perm { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }

/* history explorer */
.hx { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 18px; align-items: start; }
.hx-pick { position: sticky; top: 76px; max-height: calc(100vh - 96px); display: flex; flex-direction: column; overflow: hidden; }
.hx-ph { padding: 12px; border-bottom: 1px solid var(--line); }
.search-in { position: relative; display: flex; align-items: center; }
.search-in svg.i { position: absolute; left: 10px; color: var(--muted); pointer-events: none; }
.search-in input { padding-left: 36px; }
.hx-tree { overflow: auto; padding: 4px 0 12px; }
.ts { padding: 6px 0; }
.tsl { display: flex; align-items: center; gap: 6px; font: 600 12px var(--f); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 6px 14px 4px; }
.tsl svg.i { width: 14px; height: 14px; }
.tc summary { display: flex; align-items: center; gap: 8px; padding: 7px 14px; cursor: pointer; font-weight: 600; font-size: 14px; list-style: none; }
.tc summary::-webkit-details-marker { display: none; }
.tc summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); margin-left: 4px; transition: transform .15s; }
.tc[open] summary::after { transform: rotate(45deg); }
.tc summary:hover { background: var(--surface-2); }
.tc .cnt { font: 500 12px var(--f); color: var(--muted); }
.tf { padding: 0 6px 4px 22px; }
.tfl { font: 600 12px var(--f); color: var(--muted); padding: 6px 8px 2px; }
.tp { display: flex; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 6px; cursor: pointer; font-size: 13.5px; }
.tp:hover { background: var(--surface-2); }
.tp input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tp .sw { width: 13px; height: 13px; border-radius: 3px; border: 1.5px solid var(--line-2); flex: none; }
.tp.on .sw { border-color: transparent; }
.tp input:focus-visible ~ .sw { box-shadow: var(--focus); }
.tp b { font-family: var(--fm); font-size: 12.5px; }
.tp .u { color: var(--muted); font-size: 12px; }
.tp small { display: block; color: var(--muted); font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tp .io { font: 600 10.5px var(--f); color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 1px 4px; }
.tp.on { background: var(--green-soft); }
.tp.nt b { color: var(--muted); }
.hx-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.hx-bar .seg button { padding: 7px 11px; display: inline-flex; align-items: center; }
.hx-bar .seg svg.i { width: 15px; height: 15px; }
.tog { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; cursor: pointer; }
.tog input { width: 16px; height: 16px; accent-color: var(--green); }
.hx-custom { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px; }
.hx-custom .field { margin: 0; }
.hx-chart { overflow: hidden; }
.hx-cap { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px 4px; flex-wrap: wrap; font-size: 14px; }
.hx-canvas { position: relative; padding: 4px 8px 6px 4px; }
canvas.hc { display: block; width: 100%; touch-action: pan-y; cursor: crosshair; outline: none; }
canvas.hc:focus-visible { box-shadow: inset 0 0 0 2px var(--green); }
.hc-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; box-shadow: var(--shadow); padding: 8px 10px; font-size: 12.5px; min-width: 160px; }
.hc-tip .tt { font-weight: 600; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.hc-tip table { border-collapse: collapse; }
.hc-tip td { padding: 2px 0; } .hc-tip td + td { padding-left: 14px; text-align: right; }
.hc-tip td small { display: block; color: var(--muted); font-size: 11.5px; }
.hc-tip i, .hx-lg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 7px; vertical-align: -1px; }
.hc-sel { position: absolute; background: color-mix(in srgb, var(--green) 16%, transparent); border-left: 1.5px solid var(--green); border-right: 1.5px solid var(--green); pointer-events: none; }
.hx-hint { display: flex; gap: 14px; align-items: flex-start; margin: -150px 24px 40px; position: relative; padding: 16px 18px; border: 1px dashed var(--line-2); border-radius: 10px; background: var(--surface); max-width: 520px; }
.hx-hint svg.i { width: 26px; height: 26px; color: var(--green-ink); }
.hx-hint p { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }
.hx-lg tr.off td { opacity: .45; }
.sw-b { background: none; border: 0; padding: 4px; cursor: pointer; border-radius: 4px; }
.sw-b i { width: 14px !important; height: 14px !important; margin: 0 !important; }

/* reports */
.rp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.rp-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.rp-card.off { opacity: .75; }
.rp-card h3 { font-family: var(--fd); font-size: 17px; }
.rp-when { display: flex; gap: 8px; align-items: center; font-weight: 600; margin: 0; }
.rp-card .kv { margin: 4px 0 6px; }
.pchips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; align-items: center; }
.pchip { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; padding: 2px 4px 2px 10px; }
.pchip button { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px; display: grid; }
.pchip svg.i { width: 14px; height: 14px; }
.pick-res { list-style: none; margin: 6px 0 0; padding: 0; max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.pick-res:empty { display: none; }
.pick-res li { display: flex; gap: 8px; align-items: center; padding: 7px 10px; border-top: 1px solid var(--line); font-size: 13.5px; }
.pick-res li:first-child { border-top: 0; }
.pick-res small { display: block; color: var(--muted); font-size: 12px; }

/* Atlas Edge banner and page */
.edge-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 32px; font-size: 13.5px; border-bottom: 1px solid var(--line); background: var(--surface); }
.edge-bar .eb-ic { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; background: #000; color: var(--green); flex: none; }
.edge-bar .eb-ic svg.i { width: 16px; height: 16px; }
.edge-bar .eb-k { font: 700 11px var(--f); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-right: 4px; }
.edge-bar .eb-s { color: var(--muted); } .edge-bar .eb-s b { color: var(--ink); }
.edge-bar .eb-term { font: 600 11.5px var(--fm); color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; }
.edge-bar.ok { box-shadow: inset 4px 0 0 var(--green); }
.edge-bar.warn { background: var(--warn-soft); box-shadow: inset 4px 0 0 var(--warn-fill); }
.edge-bar.stby { background: repeating-linear-gradient(135deg, var(--surface) 0 14px, var(--surface-2) 14px 28px); box-shadow: inset 4px 0 0 var(--ink); }
.edge-bar.bad { background: var(--bad-soft); box-shadow: inset 4px 0 0 var(--bad-fill); }
.edge-hero { background: #000; color: #fff; border-radius: var(--r); padding: 22px 24px; display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr); gap: 20px 32px; align-items: center; margin-bottom: 18px; }
:root[data-theme="dark"] .edge-hero { border: 1px solid var(--line); }
.eh-role { display: flex; flex-direction: column; gap: 2px; }
.eh-role .eh-k { color: #AEB9B1; font-size: 13px; }
.eh-role b { font: 700 34px/1.1 var(--fd); color: var(--green); }
.edge-hero.standby .eh-role b { color: #fff; }
.eh-role span:last-child { color: #AEB9B1; font-size: 13.5px; }
.eh-pair { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; align-items: center; gap: 10px; }
.eh-node { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; min-width: 120px; }
.eh-node i { width: 26px; height: 26px; border-radius: 50%; border: 4px solid var(--green); background: #000; }
.eh-node.me i { background: var(--green); }
.eh-node.none i { border-color: #5E6A62; border-style: dashed; }
.eh-node small { color: #AEB9B1; font-size: 12px; }
.eh-link { position: relative; height: 26px; }
.eh-link::before { content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 3px; background: #3A463E; border-radius: 2px; }
.eh-link.on::before { background: repeating-linear-gradient(90deg, var(--green) 0 14px, transparent 14px 22px); background-size: 22px 3px; animation: flowing 1.2s linear infinite; }
@keyframes flowing { to { background-position: 22px 0; } }
.eh-link span { position: absolute; left: 50%; top: -12px; transform: translateX(-50%); font-size: 12px; color: #C7D0C9; white-space: nowrap; }

@media (max-width: 1180px) { .hx { grid-template-columns: 270px minmax(0, 1fr); } }
@media (max-width: 900px) {
  .pcounts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pcounts .tot, .pcounts .shelf { border-top: 1px solid var(--line); grid-column: span 2; }
  .pcounts .tot { border-left: 0; }
  .al-head { display: none; }
  .al-row { grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "cb pr when" "cb main main" "cb st val"; gap: 4px 10px; padding: 10px 14px 10px 10px; }
  .al-row .al-cb { grid-area: cb; align-self: start; height: auto; padding-top: 2px; }
  .al-row .prio { grid-area: pr; justify-self: start; } .al-row .ast { grid-area: st; }
  .al-row .al-main { grid-area: main; } .al-row .al-when { grid-area: when; display: flex; gap: 6px; align-items: baseline; } .al-row .al-when small { display: inline; }
  .al-row .al-val { grid-area: val; display: block !important; text-align: right; }
  .al-row .al-where { display: none; }
  .al-list { max-height: none; }
  .hx { grid-template-columns: minmax(0, 1fr); }
  .hx-pick { position: static; max-height: 360px; }
  .edge-bar { padding: 8px 16px; }
  .edge-hero { grid-template-columns: minmax(0, 1fr); }
  .drawer { width: 100vw; }
}
@media (max-width: 560px) { .pc { padding: 10px 10px 9px; } .pc .n { font-size: 24px; } .pc .l { font-size: 12px; } .ch-grid, .rp-grid { grid-template-columns: minmax(0, 1fr); } .eh-pair { grid-template-columns: minmax(0, 1fr); } .eh-link { height: 34px; } .eh-link::before { left: 50%; right: auto; width: 3px; top: 0; bottom: 0; height: auto; } .ros-t { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .ast i, .ov-list .un i { animation: none !important; } }
.al-filters .field.segf { flex: none; min-width: 0; }
.seg button { white-space: nowrap; }
@media (max-width: 900px) { .topbar .menu { flex: none; } .search-btn { flex: 1 1 auto; min-width: 0; width: auto; } .search-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
.role.operator { background: var(--warn-soft); color: var(--warn); border-color: transparent; }

/* ------------------------------------------------------------------ stage 4: graphics, schedules, calendars, Atlas logic */
.slugrow { display: flex; align-items: center; gap: 4px; } .slugrow input { flex: 1; font-family: var(--fm); }
.tag.chk { background: var(--warn-soft); color: var(--warn); border-color: transparent; font-weight: 600; } .tag.chk svg.i { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
.tag.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.err { color: var(--bad); }
/* graphics */
.gfx-bar { display: flex; align-items: center; gap: 12px 20px; padding: 12px 16px; margin-bottom: 14px; flex-wrap: wrap; }
.gfx-state { flex: 1; min-width: 240px; display: grid; gap: 4px; }
.gfx-host { height: max(560px, calc(100vh - 300px)); border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: #0d1210; position: relative; }
.gfx-host > .loading { color: #c9d3cc; }
.gfx-host.gfx-view iframe { width: 100%; height: 100%; border: 0; display: block; }
.kt-made .qr-box { margin: 0; } .kt-made .qr { background: #fff; padding: 8px; border-radius: 8px; width: 168px; flex: none; } .kt-made .copyrow input { font-family: var(--fm); font-size: 12.5px; }
.kt-new { padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
/* point picker */
.pk-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); border-radius: var(--r-s); padding: 0 10px; background: var(--surface); }
.pk-search input { border: 0 !important; box-shadow: none !important; flex: 1; padding-left: 0; }
.pk-list { margin-top: 12px; max-height: min(52vh, 460px); overflow: auto; border: 1px solid var(--line); border-radius: var(--r-s); }
.pk-gh { position: sticky; top: 0; background: var(--surface-2); font: 600 12.5px var(--f); color: var(--muted); padding: 7px 12px; border-bottom: 1px solid var(--line); }
.pk-o { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; cursor: pointer; }
.pk-o:hover:not([disabled]), .pk-o:focus-visible { background: var(--green-soft); }
.pk-o[disabled] { cursor: not-allowed; opacity: .55; }
.pk-io { font: 600 11px var(--fm); padding: 2px 6px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); flex: none; }
.pk-why { display: block; color: var(--muted); font-size: 12px; }
.pk-none { padding: 14px; margin: 0; }
/* schedule value */
.sv { display: inline-block; font: 600 13px/1.5 var(--f); padding: 1px 9px; border-radius: 4px; }
.sv.on { background: var(--green); color: #04130a; } .sv.off { background: var(--off-soft); color: var(--muted); } .sv.num { background: var(--surface-2); border: 1px solid var(--line); font-family: var(--fm); }
.sch-h .t p { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sch-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.sch-side { position: sticky; top: 16px; }
.sch-props { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 16px; align-items: end; }
.sch-props .field { margin-bottom: 10px; } .sch-props .field.wide { grid-column: 1 / -1; }
.sch-props .sc-en { margin-bottom: 18px; }
/* the week editor: a day per row, 24 h across; periods are KOTE-green bars you draw, drag and resize */
.wk-grid { display: grid; gap: 6px; }
.wk-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 34px; align-items: center; gap: 10px; }
.wk-day { font-size: 13px; color: var(--ink-2); }
.wk-row.today .wk-day b { color: var(--green-ink); } .wk-row.today .wk-day b::after { content: " today"; font-weight: 400; color: var(--muted); font-size: 11.5px; }
.wk-track { position: relative; height: 40px; border-radius: 6px; background-color: var(--surface-2); border: 1px solid var(--line);
  background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 24 - 1px), var(--line) calc(100% / 24 - 1px), var(--line) calc(100% / 24)),
    linear-gradient(90deg, transparent 0 25%, color-mix(in srgb, var(--line) 30%, transparent) 25% 75%, transparent 75%);
  cursor: crosshair; touch-action: none; user-select: none; }
.wk-track:focus-visible { box-shadow: var(--focus); }
.wk-p { position: absolute; top: 4px; bottom: 4px; border: 0; border-radius: 5px; background: var(--green); color: #04130a; font: 600 12px/1 var(--f); padding: 0 8px; cursor: grab; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; display: flex; align-items: center; min-width: 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.wk-p span { overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.wk-p.val { background: color-mix(in srgb, var(--green) 75%, var(--surface)); }
.wk-p:focus-visible { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); outline: none; }
.wk-p .h { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; }
.wk-p .h.l { left: 0; } .wk-p .h.r { right: 0; }
.wk-p:hover .h { background: rgba(0,0,0,.14); }
.wk-ghost { position: absolute; top: 4px; bottom: 4px; border-radius: 5px; background: color-mix(in srgb, var(--green) 55%, transparent); border: 1.5px dashed var(--green-ink); font: 600 11.5px/30px var(--f); color: var(--ink); padding: 0 6px; white-space: nowrap; overflow: hidden; pointer-events: none; }
.wk-now { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--bad-fill); pointer-events: none; border-radius: 1px; }
.wk-scale .wk-track { height: 18px; background: none; border: 0; cursor: default; }
.wk-scale .wk-track span { position: absolute; transform: translateX(-50%); font: 11px var(--fm); color: var(--faint); }
.wk-scale .wk-track span:first-child { transform: none; } .wk-scale .wk-track span:last-child { transform: translateX(-100%); }
.wk-row.hol .wk-track { background-color: var(--warn-soft); }
.wk-row.hol .wk-p { background: var(--warn-fill); }
.wk-hol { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--line-2); }
.wk-hol h3 { margin-bottom: 4px; }
.cal-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.wk-keys { margin: 16px 0 0; }
button.wk-m { padding: 6px; }
/* exceptions */
.ex-list { display: grid; gap: 10px; }
.ex { border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px; background: var(--surface-2); display: grid; gap: 10px; }
.ex.past { opacity: .6; }
.ex-h { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ex-h .ex-n { flex: 1 1 200px; font-weight: 600; }
.ex-h input[type=date] { width: auto; }
.ex-h .check { margin: 0; }
/* 14-day preview */
.pv { display: grid; gap: 3px; }
.pv-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 12.5px; }
.pv-row.today .pv-d b { color: var(--green-ink); }
.pv-d { line-height: 1.2; } .pv-src { display: block; color: var(--warn); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-t { position: relative; height: 16px; background: var(--surface-2); border-radius: 3px; background-image: linear-gradient(90deg, transparent calc(50% - .5px), var(--line) calc(50% - .5px), var(--line) calc(50% + .5px), transparent calc(50% + .5px)); }
.pv-s { position: absolute; top: 2px; bottom: 2px; background: var(--green); border-radius: 2px; font: 600 10px/12px var(--fm); color: #04130a; overflow: hidden; padding-left: 3px; white-space: nowrap; }
.pv-s.holiday { background: var(--warn-fill); } .pv-s.exception { background: var(--ink-2); color: var(--surface); }
.pv-list { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; max-height: 260px; overflow: auto; }
.pv-list li { margin: 2px 0; }
/* month view */
.mo-hd, .mo-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.mo-hd span { font: 600 12px var(--f); color: var(--muted); padding: 0 4px 4px; }
.mo-d { border: 1px solid var(--line); border-radius: 6px; padding: 6px; min-height: 76px; display: grid; gap: 4px; align-content: start; background: var(--surface); }
.mo-d.holiday { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn-fill) 50%, transparent); }
.mo-d.exception { background: var(--surface-2); border-color: var(--ink-2); border-style: dashed; }
.mo-d.today { box-shadow: inset 0 0 0 2px var(--green); }
.mo-n { display: flex; gap: 6px; align-items: baseline; min-width: 0; } .mo-tag { font-size: 11px; color: var(--warn); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-d.exception .mo-tag { color: var(--ink-2); }
.mo-t { position: relative; height: 6px; background: var(--surface-2); border-radius: 3px; } .mo-t i { position: absolute; top: 0; bottom: 0; background: var(--green); border-radius: 3px; }
.mo-d small { font-size: 11px; line-height: 1.25; }
.mo-key { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; color: var(--muted); }
.mo-key .k { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; border: 1px solid var(--line); background: var(--surface); }
.mo-key .k.holiday { background: var(--warn-soft); border-color: var(--warn-fill); } .mo-key .k.exception { border: 1px dashed var(--ink-2); background: var(--surface-2); }
.mo-key .k.chk { background: var(--warn-fill); border-color: var(--warn-fill); } .mo-key .k.off { border: 1px dashed var(--muted); }
/* holiday calendars */
.cal-cols { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
.cal-t tr.off td { color: var(--muted); } .cal-t tr.off b { text-decoration: line-through; text-decoration-color: var(--faint); }
.yr { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 16px; }
.yr-m h4 { font: 600 13px var(--f); margin: 0 0 4px; }
.yr-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; text-align: center; font: 11px/20px var(--fm); }
.yr-w { color: var(--faint); font-family: var(--f); }
.yr-d { border-radius: 4px; color: var(--ink-2); }
.yr-d.we { color: var(--faint); }
.yr-d.h { background: var(--warn-soft); color: var(--warn); font-weight: 700; box-shadow: inset 0 0 0 1px var(--warn-fill); }
.yr-d.h.chk { background: var(--warn-fill); color: #1b1203; }
.yr-d.o { box-shadow: inset 0 0 0 1px var(--muted); border-radius: 50%; }
.gen-choice { grid-template-columns: 1fr 1fr; max-height: 52vh; overflow: auto; padding: 2px; }
.gen-choice span { display: block; margin-top: 2px; }
/* Atlas logic */
.banner.safety { background: var(--surface); border-left: 4px solid var(--green); }
.banner.safety > svg.i { color: var(--green-ink); }
.banner.safety p { margin: 0 0 4px; }
.lg-outs td { background: var(--surface-2); padding-top: 8px !important; padding-bottom: 8px !important; }
.lg-o { display: grid; grid-template-columns: 130px 140px minmax(0, 1fr) 90px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 4px 0; }
.lg-os { font: 600 12px var(--f); } .lg-os.st-leased { color: var(--green-ink); } .lg-os.st-would { color: var(--warn); } .lg-os.st-refused, .lg-os.st-error, .lg-os.st-offline { color: var(--bad); } .lg-os.st-released, .lg-os.st-idle { color: var(--muted); }
.sv-list .sv-v { font: 600 14px var(--fm); }
@media (max-width: 1180px) { .sch-grid { grid-template-columns: minmax(0, 1fr); } .sch-side { position: static; } .cal-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .wk-row { grid-template-columns: 40px minmax(0, 1fr) 30px; gap: 6px; } .wk-p { font-size: 10.5px; padding: 0 4px; }
  .wk-row.today .wk-day b::after { content: ""; }
  .mo-d { min-height: 54px; padding: 4px; } .mo-d small, .mo-tag { display: none; }
  .gfx-host { height: 70vh; } .gen-choice { grid-template-columns: 1fr; } .lg-o { grid-template-columns: 1fr 1fr; }
  .pv-row { grid-template-columns: 70px minmax(0, 1fr); }
}
.gfx-host .kge-top { gap: 10px; }
.gfx-host .kge-top a.kg-btn[target="_blank"] { display: none; }     /* Atlas's own Open viewer button is above */
.gfx-host.full { position: fixed; inset: 0; z-index: 60; height: auto; border-radius: 0; border: 0; }
.gfx-exit { position: fixed; right: 14px; bottom: 14px; z-index: 61; }
.cmds > .pb { padding: 18px; }

/* ================================================================== stage 5: templates, deployments, flow history, snapshots */
:root { --add: #5CB85C; --add-ink: #2C7A2F; --add-soft: #E4F2E4; --chg: #F0AD4E; --chg-ink: #8A5A00; --chg-soft: #FDF1DD; --rem: #D9534F; --rem-ink: #B3261E; --rem-soft: #FBE7E5;
  --wire: #9AA39D; --canvas: #F7F9F7; --canvas-dot: #D5DBD6; --node: #FFFFFF; --node-ink: #1A221D; }
:root[data-theme="dark"] { --add-ink: #8FD48F; --add-soft: rgba(92, 184, 92, .16); --chg-ink: #F5C27A; --chg-soft: rgba(240, 173, 78, .16); --rem-ink: #FF8A80; --rem-soft: rgba(217, 83, 79, .18);
  --wire: #6E7B72; --canvas: #0F1612; --canvas-dot: #26342C; --node: #1E2A23; --node-ink: #EAF0EB; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --add-ink: #8FD48F; --add-soft: rgba(92, 184, 92, .16); --chg-ink: #F5C27A; --chg-soft: rgba(240, 173, 78, .16); --rem-ink: #FF8A80; --rem-soft: rgba(217, 83, 79, .18);
  --wire: #6E7B72; --canvas: #0F1612; --canvas-dot: #26342C; --node: #1E2A23; --node-ink: #EAF0EB; } }

/* action chips (added / changed / removed / unchanged): a glyph as well as a colour */
.act { display: inline-flex; align-items: center; gap: 5px; font: 600 12px/1 var(--f); padding: 4px 8px; border-radius: 5px; white-space: nowrap; background: var(--off-soft); color: var(--muted); }
.act.s-added { background: var(--add-soft); color: var(--add-ink); } .act.s-changed { background: var(--chg-soft); color: var(--chg-ink); } .act.s-removed { background: var(--rem-soft); color: var(--rem-ink); }

/* the visual diff */
.vd { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.vd-bar { display: flex; align-items: center; gap: 10px 14px; padding: 9px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; background: var(--surface); }
.vd-legend { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.vd-k { display: inline-flex; align-items: center; gap: 6px; } .vd-k b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.vd-k i { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--f); font-style: normal; color: #fff; }
.vd-k.s-added i { background: var(--add); } .vd-k.s-changed i { background: var(--chg); color: #3a2500; } .vd-k.s-removed i { background: var(--rem); } .vd-k.s-same i { background: transparent; border: 1.5px solid var(--line-2); }
.vd-only { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); cursor: pointer; } .vd-only input { accent-color: var(--green); }
.vd-zoom { display: inline-flex; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; }
.vd-zoom button { background: var(--surface); border: 0; color: var(--ink-2); padding: 4px 9px; font: 500 12.5px var(--f); cursor: pointer; display: inline-flex; align-items: center; }
.vd-zoom button + button { border-left: 1px solid var(--line-2); } .vd-zoom button:hover { background: var(--surface-2); } .vd-zoom svg.i { width: 15px; height: 15px; }
.vd-canvas { position: relative; background: var(--canvas); cursor: grab; touch-action: none; user-select: none; }
.vd-canvas.panning { cursor: grabbing; }
.vd-svg { display: block; width: 100%; height: 100%; }
.vd-dot { fill: var(--canvas-dot); } .vd-bg { pointer-events: none; }
.vd-g rect { fill: color-mix(in srgb, var(--ink) 4%, transparent); stroke: var(--line-2); stroke-width: 1.2; stroke-dasharray: 5 4; fill-opacity: .6; }
.vd-g text { font: 600 12px var(--f); fill: var(--muted); }
.vd-g.s-added rect { stroke: var(--add); } .vd-g.s-changed rect { stroke: var(--chg); } .vd-g.s-removed rect { stroke: var(--rem); opacity: .5; }
.vd-w { fill: none; stroke: var(--wire); stroke-width: 2.2; stroke-linecap: round; }
.vd-w.s-added { stroke: var(--add); stroke-width: 3; } .vd-w.s-removed { stroke: var(--rem); stroke-dasharray: 6 5; opacity: .6; }
.vd-l { fill: none; stroke: var(--wire); stroke-width: 1.5; stroke-dasharray: 3 5; opacity: .8; } .vd-l.s-added { stroke: var(--add); } .vd-l.s-removed { stroke: var(--rem); opacity: .5; }
.vd-n { cursor: pointer; outline: none; }
.vd-body { fill: var(--node); stroke: color-mix(in srgb, var(--ink) 30%, transparent); stroke-width: 1; }
.vd-ic { opacity: .95; } :root[data-theme="dark"] .vd-ic { opacity: .7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vd-ic { opacity: .7; } }
.vd-icl { stroke: rgba(0, 0, 0, .12); stroke-width: 1; }
.vd-t { font: 500 12.5px var(--f); fill: var(--node-ink); pointer-events: none; }
.vd-port { fill: var(--node); stroke: color-mix(in srgb, var(--ink) 35%, transparent); stroke-width: 1; }
.vd-badge circle { stroke: var(--canvas); stroke-width: 2.5; } .vd-badge text { font: 700 13px/1 var(--f); text-anchor: middle; fill: #fff; pointer-events: none; }
.vd-n.s-added .vd-body { fill: color-mix(in srgb, var(--add) 14%, var(--node)); stroke: var(--add); stroke-width: 2.4; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--add) 45%, transparent)); }
.vd-n.s-added .vd-badge circle { fill: var(--add); }
.vd-n.s-changed .vd-body { fill: color-mix(in srgb, var(--chg) 16%, var(--node)); stroke: var(--chg); stroke-width: 2.4; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--chg) 45%, transparent)); }
.vd-n.s-changed .vd-badge circle { fill: var(--chg); } .vd-n.s-changed .vd-badge text { fill: #3a2500; }
.vd-n.s-removed { opacity: .45; } .vd-n.s-removed .vd-body { fill: transparent; stroke: var(--rem); stroke-width: 2; stroke-dasharray: 6 4; }
.vd-n.s-removed .vd-ic { opacity: .35; } .vd-n.s-removed .vd-t { text-decoration: line-through; fill: var(--rem-ink); } .vd-n.s-removed .vd-badge circle { fill: var(--rem); } .vd-n.s-removed .vd-port { stroke: var(--rem); }
.vd-n.dis .vd-body { stroke-dasharray: 4 3; }
.vd-n:hover .vd-body, .vd-n:focus-visible .vd-body { stroke-width: 3; }
.vd-n.sel .vd-body { stroke: var(--ink); stroke-width: 3; }
.vd-j circle { fill: var(--wire); } .vd-j.s-added circle { fill: var(--add); } .vd-j.s-removed circle { fill: var(--rem); opacity: .5; }
.vd.only .vd-n.s-same, .vd.only .vd-w.s-same, .vd.only .vd-l.s-same, .vd.only .vd-g.s-same { opacity: .18; }
.vd-tip { position: absolute; z-index: 3; pointer-events: none; background: var(--ink); color: var(--surface); border-radius: 7px; padding: 8px 10px; font-size: 12.5px; max-width: 300px; box-shadow: var(--shadow); display: grid; gap: 3px; }
.vd-tt { opacity: .7; font-family: var(--fm); font-size: 11.5px; } .vd-tp { font-family: var(--fm); font-size: 11.5px; border-top: 1px solid color-mix(in srgb, var(--surface) 25%, transparent); padding-top: 4px; margin-top: 2px; }
.vd-ts { font-weight: 600; } .vd-ts.s-added { color: #9be29b; } .vd-ts.s-changed { color: #ffd08a; } .vd-ts.s-removed { color: #ffaaa3; }
:root[data-theme="dark"] .vd-ts.s-added { color: var(--add-ink); }
.vd-detail:not(:empty) { border-top: 1px solid var(--line); padding: 12px 14px; }
.vd-dh { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; } .vd-dh .btn { margin-left: auto; }
.vd-empty { display: flex; gap: 10px; align-items: center; padding: 18px; color: var(--muted); border: 1px dashed var(--line-2); border-radius: var(--r); font-size: 13.5px; }
.vd-props td { vertical-align: top; font-size: 13px; } .vd-props code { white-space: pre-wrap; word-break: break-word; font-size: 12px; }
.vd-bef code { color: var(--rem-ink); } .vd-aft code { color: var(--add-ink); }
/* unit (tab) diff lists */
.ud-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ud { border: 1px solid var(--line); border-radius: 9px; background: var(--surface); overflow: hidden; border-left: 4px solid var(--line-2); }
.ud.a-added { border-left-color: var(--add); } .ud.a-changed { border-left-color: var(--chg); } .ud.a-removed { border-left-color: var(--rem); }
.ud-h { display: flex; align-items: center; gap: 10px; padding: 9px 12px; flex-wrap: wrap; }
.ud-k { font-size: 12px; color: var(--muted); }
.ud-c { display: inline-flex; gap: 8px; font: 600 12.5px var(--fm); } .n-a { color: var(--add-ink); } .n-c { color: var(--chg-ink); } .n-r { color: var(--rem-ink); }
.ud-nodes, .ud-draw { padding: 0 12px 12px; }
.ud-draw .vd { margin-top: 2px; }
.btn.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.nd-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.nd { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; font-size: 13.5px; }
.nd .act { width: 22px; justify-content: center; padding: 4px 0; }
.nd-props { flex-basis: 100%; }
.ud-sum { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* rail separators (2 now) and the Deployments count */
.rail .count.warn { background: var(--warn-fill); color: #000; }

/* ---------------- template library */
.kchip { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--f); padding: 5px 9px 5px 7px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.kchip svg.i { width: 15px; height: 15px; }
.kchip.k-flow { background: var(--green-soft); border-color: var(--green-line); color: var(--green-ink); }
.kchip.k-equipment { background: #000; border-color: #000; color: #fff; } .kchip.k-equipment svg.i { color: var(--green); }
:root[data-theme="dark"] .kchip.k-equipment { background: var(--ink); color: #000; border-color: var(--ink); } :root[data-theme="dark"] .kchip.k-equipment svg.i { color: var(--green-ink); }
.kchip.k-pack { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.tp-card { display: flex; flex-direction: column; gap: 9px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px 14px; color: inherit; text-decoration: none; position: relative; overflow: hidden; min-width: 0; transition: border-color .12s, box-shadow .12s, transform .12s; }
.tp-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--green); }
.tp-card.k-equipment::before { background: var(--ink); } .tp-card.k-pack::before { background: var(--warn-fill); }
.tp-card:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-1px); }
.tp-top { display: flex; align-items: center; gap: 8px; } .tp-v { margin-left: auto; font: 600 12.5px var(--fm); color: var(--muted); }
.tp-card h3 { font-family: var(--fd); font-size: 17.5px; font-weight: 600; letter-spacing: -.01em; }
.tp-d { margin: 0; font-size: 13.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
.tp-units { display: flex; flex-wrap: wrap; gap: 6px; } .tp-units span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 2px 8px 2px 6px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-units svg.i { width: 13px; height: 13px; color: var(--muted); }
.tp-f { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 10px; margin-top: auto; }
.tp-f > span:first-child { flex: 1; min-width: 0; }
.tp-i { display: inline-flex; align-items: center; gap: 5px; font: 600 13px var(--f); color: var(--muted); } .tp-i.has { color: var(--green-ink); } .tp-i svg.i { width: 16px; height: 16px; }
.tp-u { margin-top: -4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-h .t p { margin-top: 8px; } .tp-h h1 { margin-top: 10px; }
.tp-cont { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-unit { display: inline-grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 7px 11px 7px 9px; background: var(--surface-2); min-width: 0; }
.tp-unit svg.i { grid-row: span 2; color: var(--green-ink); } .tp-unit.k-subflow svg.i { color: var(--ink-2); } .tp-unit.k-config svg.i { color: var(--muted); }
.tp-unit b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tp-unit small { font-size: 11.5px; color: var(--muted); }
/* controller pickers */
.pick-tools { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; } .pick-tools input { max-width: 320px; }
.pick-list { border: 1px solid var(--line); border-radius: var(--r-s); max-height: min(46vh, 380px); overflow: auto; background: var(--surface); }
.pick-g + .pick-g { border-top: 1px solid var(--line); }
.pick-gh { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface-2); position: sticky; top: 0; z-index: 1; cursor: pointer; font-size: 13.5px; }
.pick-c { display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 32px; cursor: pointer; font-size: 14px; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.pick-g:not(:has(.pick-gh)) .pick-c, .pick-list > .pick-c { padding-left: 12px; }
.pick-c:hover { background: var(--green-soft); } .pick-c small { margin-left: auto; font-size: 12px; }
.pick-c input, .pick-gh input { accent-color: var(--green); width: 16px; height: 16px; }
/* parameter editor (capture wizard) */
.pe-list { display: grid; gap: 10px; }
.pe { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; border: 1px solid var(--line); border-radius: 9px; padding: 12px; background: var(--surface); transition: opacity .12s; }
.pe:not(:has(.pe-acc)) { grid-template-columns: minmax(0, 1fr); }
.pe.off { opacity: .5; } .pe.off .pe-main { pointer-events: none; }
.pe-acc input { width: 18px; height: 18px; accent-color: var(--green); margin-top: 8px; }
.pe-main { display: grid; gap: 8px; min-width: 0; }
.pe-row { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; }
.pe-row input, .pe-row select { min-height: 34px; padding: 6px 9px; font-size: 13.5px; }
.pe-label { flex: 1 1 200px; font-weight: 600 !important; }
.pe-name { display: inline-flex; align-items: center; color: var(--muted); font-size: 13px; } .pe-name input { width: 130px; font-family: var(--fm); font-size: 12.5px; margin: 0 2px; }
.pe-row select { width: auto; padding-right: 30px !important; }
.pe-f { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); } .pe-f input { width: 140px; } .pe-f.sm input { width: 84px; }
.pe-req { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--ink-2); } .pe-req input { accent-color: var(--green); }
.pe-desc { min-height: 32px !important; padding: 5px 9px !important; font-size: 13px !important; }
.pe-why { font-size: 12px; color: var(--green-ink); display: flex; gap: 6px; align-items: flex-start; } .pe-why svg.i { width: 15px; height: 15px; margin-top: 1px; }
.cap-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.cap-u { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line-2); border-radius: 9px; padding: 10px 12px; cursor: pointer; background: var(--surface); }
.cap-u:has(input:checked) { border-color: var(--green); background: var(--green-soft); }
.cap-u input { width: 18px; height: 18px; accent-color: var(--green); } .cap-u small { display: block; color: var(--muted); font-size: 12px; } .cap-u svg.i { color: var(--muted); }
.cred-add { border-top: 1px dashed var(--line-2); padding-top: 14px; }
.eq-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px; margin-bottom: 6px; background: var(--surface-2); font-size: 13.5px; }
.eq-add { display: flex; gap: 8px; flex-wrap: wrap; } .eq-add select, .eq-add input { flex: 1 1 140px; width: auto; min-height: 36px; padding: 6px 9px; }
.wiz-foot { display: flex; gap: 10px; align-items: center; margin-top: 20px; padding: 14px 0 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.drift-pick { display: grid; gap: 6px; } .dp-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.pill.ist { font-weight: 600; }

/* ---------------- flow history */
.fh { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 20px; align-items: start; }
.fh-list { position: sticky; top: 76px; max-height: calc(100vh - 100px); display: flex; flex-direction: column; }
.fvs { list-style: none; margin: 0; padding: 0; overflow: auto; }
.fv { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px 11px 12px; border-top: 1px solid var(--line); position: relative; }
.fv:first-child { border-top: 0; }
.fv.a { background: color-mix(in srgb, var(--rem) 6%, transparent); } .fv.b { background: color-mix(in srgb, var(--add) 8%, transparent); }
.fv.a::before, .fv.b::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--rem); } .fv.b::before { background: var(--add); }
.fv-ab { display: grid; gap: 4px; flex: none; }
.fv-ab label { position: relative; cursor: pointer; } .fv-ab input { position: absolute; opacity: 0; }
.fv-ab span { display: grid; place-items: center; width: 24px; height: 22px; border-radius: 5px; border: 1.5px solid var(--line-2); font: 700 11px var(--f); color: var(--faint); background: var(--surface); }
.fv-ab input:checked + span { color: #fff; } .fv-ab input[name=fv-a]:checked + span { background: var(--rem); border-color: var(--rem); } .fv-ab input[name=fv-b]:checked + span { background: var(--add); border-color: var(--add); color: #000; }
.fv-ab input:focus-visible + span { box-shadow: var(--focus); }
.fv-t { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fv-ch { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .fv-ch .act { font-size: 11.5px; padding: 3px 6px; }
.fv .btn { flex: none; }
.cmp { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 14px; }
.cmp-side { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; background: var(--surface-2); min-width: 0; }
.cmp-l { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; font: 700 12px var(--f); background: var(--rem); color: #fff; flex: none; }
.cmp-side + .cmp-arrow + .cmp-side .cmp-l { background: var(--add); color: #000; }
.cmp-arrow { color: var(--muted); }
/* snapshots and pending commit */
.pend-panel { border-color: color-mix(in srgb, var(--chg) 55%, transparent); background: linear-gradient(90deg, var(--chg-soft), var(--surface) 55%); }
.pend { display: flex; gap: 20px; align-items: flex-start; padding: 18px 20px; } .pend h3 { font-family: var(--fd); font-size: 17px; }
.chk-list { list-style: none; margin: 10px 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.chk-list li { display: inline-flex; gap: 6px; align-items: center; } .chk-list svg.i { width: 16px; height: 16px; }
.chk-list .ok svg.i { color: var(--add); } .chk-list .bad svg.i { color: var(--rem); } .chk-list .na svg.i { color: var(--faint); }
.chk-list.big { display: grid; gap: 6px; margin: 0 0 8px; }
.ring { display: block; flex: none; } .ring .rt { fill: none; stroke: var(--line); stroke-width: 5; } .ring .rf { fill: none; stroke: var(--chg); stroke-width: 5; stroke-linecap: round; transition: stroke-dasharray .9s linear; }
.ring.low .rf { stroke: var(--rem); } .ring text { font: 700 12.5px var(--fm); text-anchor: middle; fill: var(--ink); font-variant-numeric: tabular-nums; }
/* step state chips */
.st { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--f); color: var(--ink-2); white-space: nowrap; }
.st i { width: 9px; height: 9px; border-radius: 50%; background: var(--off); flex: none; }
.st-committed i { background: var(--add); } .st-committed { color: var(--add-ink); }
.st-confirming i { background: var(--chg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--chg) 30%, transparent); animation: beat2 1.6s ease-in-out infinite; } .st-confirming { color: var(--chg-ink); }
.st-sending i, .st-snapshot i, .st-applying i { background: var(--green); animation: beat2 1s ease-in-out infinite; }
.st-rolled-back i, .st-failed i, .st-rolling-back i { background: var(--rem); } .st-rolled-back, .st-failed, .st-rolling-back { color: var(--rem-ink); }
.st-waiting i { background: transparent; border: 2px solid var(--warn-fill); } .st-skipped i { background: transparent; border: 2px dashed var(--off); } .st-queued i { background: transparent; border: 2px solid var(--off); }
@keyframes beat2 { 50% { opacity: .45; } }
/* maintenance windows */
.mw-week { display: grid; gap: 4px; margin: 6px 0 16px; }
.mw-row { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 12.5px; color: var(--ink-2); }
.mw-row.today span { color: var(--green-ink); font-weight: 600; }
.mw-t { position: relative; height: 18px; background: var(--surface-2); border-radius: 4px; border: 1px solid var(--line); background-image: linear-gradient(90deg, transparent calc(25% - .5px), var(--line) calc(25% - .5px), var(--line) calc(25% + .5px), transparent calc(25% + .5px), transparent calc(50% - .5px), var(--line) calc(50% - .5px), var(--line) calc(50% + .5px), transparent calc(50% + .5px), transparent calc(75% - .5px), var(--line) calc(75% - .5px), var(--line) calc(75% + .5px), transparent calc(75% + .5px)); }
.mw-t i { position: absolute; top: 2px; bottom: 2px; background: var(--green); border-radius: 3px; }
.mw-now { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--bad-fill); }
.mw-scale .mw-t { background: none; border: 0; height: 14px; } .mw-scale em { position: absolute; transform: translateX(-50%); font: 10.5px var(--fm); color: var(--faint); font-style: normal; }
.mw-scale em:first-child { transform: none; } .mw-scale em:last-child { transform: translateX(-100%); }
.mw-list { display: grid; gap: 8px; }
.mw-w { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; background: var(--surface-2); }
.mw-days { display: flex; gap: 3px; flex-wrap: wrap; }
.mw-days .day, .ros-d .day { position: relative; cursor: pointer; } .mw-days .day input { position: absolute; opacity: 0; }
.mw-days .day span { display: inline-block; font: 600 12px var(--f); padding: 5px 8px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); }
.mw-days .day input:checked + span { background: var(--green); border-color: var(--green); color: #000; } .mw-days .day input:focus-visible + span { box-shadow: var(--focus); }
.mw-tm { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); } .mw-tm input { width: 116px; min-height: 34px; padding: 5px 8px; }
.mw-w .btn { margin-left: auto; }

/* ---------------- deployments: state pills and progress */
.dpill { display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px/1 var(--f); padding: 5px 10px 5px 8px; border-radius: 99px; background: var(--off-soft); color: var(--muted); white-space: nowrap; vertical-align: middle; }
.dpill i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.dpill.ok { background: var(--green-soft); color: var(--green-ink); } .dpill.warn { background: var(--warn-soft); color: var(--warn); } .dpill.bad { background: var(--bad-soft); color: var(--bad); }
.dpill.info { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.dpill.run { background: var(--green); color: #000; } .dpill.run i { background: #000; animation: beat2 1.2s ease-in-out infinite; }
.dprog { display: flex; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; gap: 1px; }
.dprog.big { height: 12px; } .dprog i { display: block; height: 100%; }
.dprog .p-committed { background: var(--add); } .dprog .p-active { background: var(--chg); background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.28) 0 6px, transparent 6px 12px); background-size: 17px 17px; animation: slide 1s linear infinite; }
.dprog .p-bad { background: var(--rem); } .dprog .p-rb { background: color-mix(in srgb, var(--rem) 55%, var(--ink)); } .dprog .p-skip { background: var(--off); } .dprog .p-wait { background: var(--warn-fill); opacity: .55; }
@keyframes slide { to { background-position: 17px 0; } }
.dl-live { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-bottom: 18px; }
.dl-card { display: grid; gap: 10px; background: #000; color: #fff; border-radius: var(--r); padding: 16px 18px; text-decoration: none; border: 1px solid #000; }
.dl-card .small.muted { color: #AEB9B1; } .dl-card .dprog { background: #26332B; }
:root[data-theme="dark"] .dl-card { border-color: var(--line); }
.dl-card:hover { box-shadow: var(--shadow); }
.dl-f { max-width: 100%; overflow-x: auto; }
/* ---------------- wizard */
.wz { display: flex; gap: 0; margin: 0 0 22px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.wz a { flex: 1 1 0; min-width: max-content; display: flex; align-items: center; gap: 9px; padding: 12px 16px; text-decoration: none; color: var(--muted); font-size: 13.5px; font-weight: 500; border-left: 1px solid var(--line); position: relative; white-space: nowrap; }
.wz a:first-child { border-left: 0; }
.wz a b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line-2); font: 700 11.5px var(--f); flex: none; }
.wz a.done { color: var(--ink-2); } .wz a.done b { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.wz a.now { color: var(--ink); font-weight: 600; background: var(--green-soft); } .wz a.now b { background: var(--green); border-color: var(--green); color: #000; }
.wz a.now::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--green); }
.wz a.off { pointer-events: none; opacity: .6; }
.wz a:hover:not(.now) { background: var(--surface-2); }
.wz-cols { align-items: start; }
.chg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: chg; }
.chg { display: flex; gap: 12px; align-items: center; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); }
.chg-ic { width: 34px; height: 34px; border-radius: 8px; background: #000; color: var(--green); display: grid; place-items: center; flex: none; }
:root[data-theme="dark"] .chg-ic { background: var(--ink); color: #0a6b0a; }
.chg-list.ro .chg { background: var(--surface); }
.ac-il { display: grid; gap: 4px; max-height: 300px; overflow: auto; border: 1px solid var(--line); border-radius: 7px; padding: 4px 10px; }
.ac-row { display: flex; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .ac-row:last-child { border-bottom: 0; } .ac-row select { width: auto; min-height: 30px; padding: 3px 28px 3px 8px; font-size: 13px; }
.tg-sum { position: sticky; top: 76px; }
.tg-n { font: 700 26px/1 var(--fd); color: var(--green-ink); }
.tg-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 420px; overflow: auto; }
.tg-l li { display: flex; gap: 8px; align-items: center; font-size: 13.5px; padding: 3px 0; } .tg-l small { margin-left: auto; color: var(--muted); font-size: 12px; }
/* parameter spreadsheet */
.pg + .pg { margin-top: 18px; }
.pg > .ph .btn { flex: none; }
.pg-wrap { overflow: auto; max-height: 62vh; border-bottom: 1px solid var(--line); }
.pg-t { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13.5px; }
.pg-t th, .pg-t td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 0; background: var(--surface); }
.pg-t thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); text-align: left; padding: 8px 10px; font-weight: 600; font-size: 12.5px; color: var(--ink-2); vertical-align: bottom; min-width: 130px; }
.pg-t thead th small { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; margin-top: 2px; } .pg-t thead th em { color: var(--bad); font-style: normal; margin-left: 2px; }
.pg-t .pg-fill td { position: sticky; top: 49px; z-index: 2; background: var(--surface-2); padding: 2px 4px; }
.pg-t .pg-fill .btn { min-height: 24px; padding: 2px 6px; font-size: 11.5px; color: var(--muted); }
.pg-t .pg-c { position: sticky; left: 0; z-index: 1; min-width: 170px; background: var(--surface-2); padding: 7px 12px; text-align: left; font-weight: 400; white-space: nowrap; }
.pg-t thead .pg-c { z-index: 3; }
.pg-t tbody .pg-c { display: table-cell; } .pg-t tbody .pg-c .led { margin-right: 8px; } .pg-t tbody .pg-c small { display: block; color: var(--muted); font-size: 11.5px; margin-left: 17px; }
.pg-t input, .pg-t select { border: 0; border-radius: 0; min-height: 40px; padding: 8px 10px; background: transparent; font: 400 13.5px var(--fm); box-shadow: none; width: 100%; }
.pg-t select { font-family: var(--f); background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); }
.pg-t input::placeholder { color: var(--faint); font-style: italic; }
.pg-t input:focus, .pg-t select:focus { outline: 2px solid var(--green); outline-offset: -2px; background: var(--green-soft); box-shadow: none; }
.pg-t input.bad { background: var(--bad-soft); color: var(--bad); outline: 2px solid var(--bad-fill); outline-offset: -2px; }
.pg-t td:has(input:not(:placeholder-shown)) { background: color-mix(in srgb, var(--green) 5%, var(--surface)); }
.pg-st { min-width: 150px; padding: 6px 10px !important; font-size: 12.5px; white-space: nowrap; }
.pg-ok, .pg-bad { display: inline-flex; gap: 5px; align-items: center; } .pg-ok { color: var(--add-ink); } .pg-bad { color: var(--rem-ink); } .pg-ok svg.i, .pg-bad svg.i { width: 15px; height: 15px; }
.pg-creds { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; padding: 14px 18px 18px; }
.pg-cred { border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; background: var(--surface-2); }
.pg-ch { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; } .pg-ch .pill { margin-left: auto; }
.pg-cred .row input { flex: 1 1 160px; width: auto; min-height: 34px; padding: 6px 9px; }
.pg-cl { display: grid; gap: 6px; margin-top: 8px; } .pg-cl .row { flex-wrap: nowrap; } .pg-cl input { max-width: 200px; }
.pg-dirty { order: 2; }
/* waves plan */
.plan-cols { display: flex; gap: 0; align-items: stretch; overflow-x: auto; padding-bottom: 4px; }
.plan-w { flex: 0 0 auto; min-width: 150px; max-width: 220px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); overflow: hidden; }
.plan-w.can { border-color: var(--green); } .plan-w.can .plan-h { background: var(--green); color: #000; }
.plan-h { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; background: var(--ink); color: var(--surface); font-size: 13px; }
.plan-h span { font: 700 12.5px var(--fm); opacity: .8; }
.plan-w ul { list-style: none; margin: 0; padding: 6px 10px 8px; font-size: 12.5px; display: grid; gap: 3px; }
.plan-w li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-gate { flex: 0 0 28px; display: grid; place-items: center; color: var(--muted); }
.cw { display: flex; gap: 14px; align-items: center; } .cw input { flex: 1; accent-color: var(--green); } .cw output { font: 700 22px var(--fd); min-width: 70px; text-align: right; }
.choice.pol, .choice.one { grid-template-columns: minmax(0, 1fr); }
.sw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .sw-list li { border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; } .sw-list li.none { border-color: color-mix(in srgb, var(--bad-fill) 45%, transparent); }
/* preview */
.pv-hero { display: flex; gap: 20px; align-items: flex-start; padding: 12px 8px; } .pv-hero > svg.i { width: 44px; height: 44px; color: var(--green); flex: none; stroke-width: 1.5; }
.pv-hero h2 { font-size: 22px; margin-bottom: 6px; } .pv-hero p { max-width: 62ch; }
.pv-sum { display: flex; gap: 0; align-items: stretch; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; flex-wrap: wrap; }
.pv-sum > * { padding: 14px 18px; border-left: 1px solid var(--line); display: flex; align-items: center; }
.pv-sum > :first-child { border-left: 0; }
.pv-st { gap: 12px; flex: 1 1 280px; } .pv-st > svg.i { width: 30px; height: 30px; } .pv-st b { display: block; font: 600 17px var(--fd); } .pv-st .small { display: block; }
.pv-st.ok > svg.i { color: var(--add); } .pv-st.bad > svg.i { color: var(--rem); }
.pv-n { flex-direction: column; align-items: flex-start !important; justify-content: center; min-width: 96px; } .pv-n b { font: 700 24px/1 var(--fd); font-variant-numeric: tabular-nums; } .pv-n span { font-size: 12px; color: var(--muted); margin-top: 3px; }
.pv-n.bad b { color: var(--bad); } .pv-n.warn b { color: var(--warn); }
#pv-runbox:empty { display: none; }
.pv-units { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pvc-list { list-style: none; margin: 0; padding: 0; }
.pvc { border-top: 1px solid var(--line); border-left: 4px solid transparent; }
.pvc:first-child { border-top: 0; }
.pvc.st-err { border-left-color: var(--rem); } .pvc.st-warn { border-left-color: var(--warn-fill); } .pvc.st-ok, .pvc.st-acked { border-left-color: var(--add); } .pvc.st-ex { opacity: .6; }
.pvc-h { display: flex; gap: 10px; align-items: center; padding: 10px 16px 10px 12px; flex-wrap: wrap; }
.pvc-i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--off-soft); color: var(--muted); } .pvc-i svg.i { width: 15px; height: 15px; }
.st-err .pvc-i { background: var(--rem); color: #fff; } .st-warn .pvc-i { background: var(--warn-fill); color: #000; } .st-ok .pvc-i, .st-acked .pvc-i { background: var(--add); color: #000; }
.pvc-t { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: inherit; font: inherit; min-width: 160px; flex: 0 1 240px; }
.pvc-t b { display: block; } .pvc-t small { color: var(--muted); font-size: 12px; } .pvc-t:hover b { text-decoration: underline; }
.pvc-u { display: flex; gap: 4px; flex-wrap: wrap; flex: 1 1 200px; } .pvc-p { white-space: nowrap; font-family: var(--fm); }
.pvc-b { padding: 4px 18px 18px 50px; display: grid; gap: 12px; }
.pv-errs { border: 1px solid color-mix(in srgb, var(--bad-fill) 40%, transparent); background: var(--bad-soft); border-radius: 8px; padding: 10px 12px; }
.pv-e { display: flex; gap: 8px; align-items: flex-start; color: var(--bad); font-size: 13.5px; padding: 2px 0; } .pv-e code { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.pv-ws { display: grid; gap: 4px; } .pv-w { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; padding: 6px 10px; border-radius: 7px; background: var(--warn-soft); cursor: pointer; } .pv-w input { accent-color: var(--green); width: 16px; height: 16px; margin-top: 2px; }
.pv-drift { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: grid; gap: 8px; font-size: 13.5px; }
.pv-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; font-size: 13px; } .pv-facts > div { display: contents; } .pv-facts b { color: var(--muted); font-weight: 500; } .pv-facts .bad b, .pv-facts .bad span { color: var(--bad); }
.pv-facts code { font-size: 11.5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.pv-h3 { font-size: 14px; margin: 4px 0 8px; }
/* approval */
.ap-card { display: flex; gap: 18px; align-items: flex-start; padding: 20px 22px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.ap-card.wait { border-color: color-mix(in srgb, var(--warn-fill) 50%, transparent); background: linear-gradient(90deg, var(--warn-soft), var(--surface) 60%); }
.ap-card.ok { border-color: var(--green-line); background: linear-gradient(90deg, var(--green-soft), var(--surface) 60%); }
.ap-ic { width: 48px; height: 48px; border-radius: 12px; background: #000; color: var(--green); display: grid; place-items: center; flex: none; } .ap-ic svg.i { width: 26px; height: 26px; }
.ap-card.wait .ap-ic { color: var(--warn-fill); }
.ap-card h2 { font-size: 21px; margin-bottom: 4px; } .ap-card .row { margin-top: 12px; } .ap-card .btn.lg { margin-top: 6px; }
.ap-why { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); margin: 10px 0 0; } .ap-why svg.i { margin-top: 1px; color: var(--muted); }

/* ---------------- live board: waves on a line (the KOTE bus), controllers as cards */
.lb-head { display: flex; align-items: flex-start; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 16px; }
.lb-meta { display: flex; gap: 8px 16px; align-items: center; flex-wrap: wrap; margin-top: 10px; color: var(--muted); font-size: 13.5px; }
.lb-eta { display: inline-flex; gap: 6px; align-items: center; color: var(--ink); } .lb-eta svg.i { color: var(--green-ink); }
.lb-prog { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px; margin-bottom: 14px; }
.lb-pk { display: flex; gap: 6px 16px; flex-wrap: wrap; align-items: center; margin-top: 10px; font-size: 13px; color: var(--muted); } .lb-pk > b { color: var(--ink); font: 700 15px var(--fd); }
.lb-board { display: flex; align-items: stretch; gap: 0; overflow-x: auto; background: #000; border-radius: var(--r); padding: 18px; margin-bottom: 20px; min-height: 260px; scrollbar-color: #3A463E transparent; }
:root[data-theme="dark"] .lb-board { border: 1px solid var(--line); }
.lb-col { flex: 0 0 272px; display: flex; flex-direction: column; background: #0D1410; border: 1px solid #1F2A23; border-radius: 10px; min-width: 0; }
.lb-col.now { border-color: var(--green); box-shadow: 0 0 0 1px var(--green), 0 0 30px -10px var(--green); }
.lb-col.done { border-color: #2C3B31; }
.lb-col header { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px 14px; border-bottom: 1px solid #1F2A23; color: #fff; }
.lb-col header b { display: block; font: 600 15px var(--fd); } .lb-col header small { color: #8E9A92; font-size: 12px; }
.lb-col.can header b::before { content: "◆ "; color: var(--green); font-size: 11px; vertical-align: 1px; }
.lb-col header .btn { color: #AEB9B1; } .lb-col header .btn:hover { background: #16201B; color: #fff; }
.lb-cards { display: grid; gap: 8px; padding: 10px; align-content: start; }
.lb-card { background: #16201B; border: 1px solid #26342C; border-left: 4px solid #3A463E; border-radius: 8px; padding: 10px 10px 10px 12px; color: #EAF0EB; cursor: pointer; outline: none; transition: border-color .15s, transform .12s; }
.lb-card:hover, .lb-card:focus-visible { border-color: #3A4A40; transform: translateY(-1px); }
.lb-card:focus-visible { box-shadow: var(--focus); }
.lb-ch { display: flex; gap: 8px; align-items: flex-start; } .lb-ch b { display: block; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lb-ch small { color: #8E9A92; font-size: 11.5px; }
.lb-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #5E6A62; margin-top: 5px; flex: none; }
.lb-m { color: #8E9A92; min-height: 24px; padding: 2px 4px; margin: -3px -4px 0 0; } .lb-m:hover { background: #26342C; color: #fff; } .lb-m svg.i { width: 16px; height: 16px; }
.lb-st { display: flex; gap: 8px; align-items: center; margin-top: 8px; } .lb-st .st { color: #C9D3CC; }
.lb-why { display: flex; gap: 7px; align-items: flex-start; margin: 8px 0 0; font-size: 12.5px; color: #AEB9B1; } .lb-why svg.i { width: 15px; height: 15px; margin-top: 1px; flex: none; }
.lb-why small { display: block; color: #8E9A92; } .lb-why.ok svg.i { color: var(--add); } .lb-why.bad { color: #FFB4AC; } .lb-why.bad svg.i { color: var(--rem); }
.lb-conf { display: flex; gap: 12px; align-items: center; margin-top: 8px; }
.lb-conf .ring .rt { stroke: #26342C; } .lb-conf .ring text { fill: #fff; }
.lb-chk { display: flex; flex-wrap: wrap; gap: 4px; }
.ck { display: inline-flex; align-items: center; gap: 3px; font: 600 10.5px/1 var(--fm); padding: 3px 5px; border-radius: 4px; background: #26342C; color: #AEB9B1; text-transform: uppercase; letter-spacing: .02em; }
.ck svg.i { width: 11px; height: 11px; stroke-width: 2.5; }
.ck.c-pass { background: rgba(92, 184, 92, .2); color: #9BE29B; } .ck.c-fail { background: rgba(217, 83, 79, .28); color: #FFB4AC; } .ck.c-pending { color: #F5C27A; } .ck.c-off, .ck.c-na { opacity: .55; }
.lb-steps { display: flex; gap: 4px; align-items: center; margin-top: 10px; font-size: 12px; color: #AEB9B1; } .lb-steps i { width: 18px; height: 4px; border-radius: 2px; background: #26342C; } .lb-steps i.done { background: var(--green); } .lb-steps i.now { background: var(--green); animation: beat2 .9s ease-in-out infinite; } .lb-steps span { margin-left: 6px; }
.lb-card.st-confirming { border-left-color: var(--chg); box-shadow: 0 0 22px -12px var(--chg); } .lb-card.st-confirming .lb-dot { border-color: var(--chg); background: var(--chg); animation: beat2 1.4s infinite; }
.lb-card.st-sending, .lb-card.st-snapshot, .lb-card.st-applying { border-left-color: var(--green); } .lb-card.st-sending .lb-dot, .lb-card.st-snapshot .lb-dot, .lb-card.st-applying .lb-dot { border-color: var(--green); animation: beat2 .9s infinite; }
.lb-card.st-committed { border-left-color: var(--add); } .lb-card.st-committed .lb-dot { border-color: var(--add); background: var(--add); }
.lb-card.st-rolled-back, .lb-card.st-failed, .lb-card.st-rolling-back { border-left-color: var(--rem); } .lb-card.st-rolled-back .lb-dot, .lb-card.st-failed .lb-dot { border-color: var(--rem); background: var(--rem); }
.lb-card.st-skipped { border-left-style: dashed; opacity: .7; } .lb-card.st-waiting { border-left-color: var(--warn-fill); } .lb-card.st-waiting .lb-dot { border-color: var(--warn-fill); }
.lb-card.st-queued { opacity: .75; }
.lb-card.sel { border-color: var(--green); }
.lb-gate { flex: 0 0 92px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 22px; }
.lb-gl { position: absolute; left: 0; right: 0; top: 38px; height: 2px; background: #3A463E; }
.lb-gate.g-passed .lb-gl, .lb-gate.g-passed-by-admin .lb-gl { background: var(--green); }
.lb-gc { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: #AEB9B1; font-size: 11.5px; padding: 0 4px; }
.lb-gc b { color: #fff; font: 600 12px var(--f); margin-top: 2px; }
.lb-gi { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #000; border: 2.5px solid #5E6A62; color: #AEB9B1; } .lb-gi svg.i { width: 16px; height: 16px; }
.g-waiting .lb-gi { border-color: var(--chg); color: var(--chg); } .g-awaiting-admin .lb-gi { border-color: var(--warn-fill); color: var(--warn-fill); animation: beat2 1.4s infinite; }
.g-passed .lb-gi, .g-passed-by-admin .lb-gi { border-color: var(--green); background: var(--green); color: #000; } .g-failed .lb-gi { border-color: var(--rem); background: var(--rem); color: #fff; }
.lb-gt { font: 700 13px var(--fm); color: #F5C27A; } .lb-gk { display: flex; gap: 3px; } .lb-gk .ck { padding: 3px; }
.gate-b { align-items: center; }
.lb-low { align-items: start; }
.lb-log { list-style: none; margin: 0; padding: 4px 0; max-height: 520px; overflow: auto; }
.lb-log li { display: grid; grid-template-columns: 46px 12px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 6px 18px; font-size: 13px; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.lb-log li:first-child { border-top: 0; } .lb-log time { color: var(--muted); font: 12px var(--fm); } .lb-log .led { width: 8px; height: 8px; box-shadow: none; }
.lb-log li.lv-error { background: var(--bad-soft); } .lb-log li.lv-warn .grow { color: var(--warn); } .lb-log li.fresh { animation: fresh 2.4s ease-out; }

@media (max-width: 1180px) { .fh { grid-template-columns: minmax(0, 1fr); } .fh-list { position: static; max-height: 420px; } .tg-sum { position: static; } }
@media (max-width: 900px) {
  .wz a span { display: none; } .wz a.now span { display: inline; } .wz a { flex: 0 0 auto; padding: 10px 12px; }
  .pv-sum > * { flex: 1 1 33%; border-top: 1px solid var(--line); } .pv-st { flex-basis: 100% !important; border-top: 0 !important; }
  .pvc-b { padding-left: 18px; }
  .lb-col { flex-basis: 248px; } .lb-gate { flex-basis: 70px; }
  .pend { flex-direction: column; }
  .cmp { grid-template-columns: minmax(0, 1fr); } .cmp-arrow { display: none; }
}
@media (max-width: 560px) {
  .tp-grid { grid-template-columns: minmax(0, 1fr); }
  .lb-board { padding: 12px; margin-left: -4px; margin-right: -4px; } .lb-col { flex-basis: 232px; }
  .ap-card { flex-direction: column; } .pe-f input { width: 110px; }
  .pv-facts { grid-template-columns: minmax(0, 1fr); } .pv-facts b { margin-top: 4px; }
  .vd-bar { gap: 8px; } .vd-legend { gap: 4px 10px; }
  .mw-tm input { width: 104px; }
}
/* the menu has grown (stage 5): it scrolls on short screens instead of pushing the account and theme buttons out of reach */
.rail { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #26342C transparent; }
@media (min-width: 901px) and (max-height: 940px) { .rail nav a { padding-top: 7px; padding-bottom: 7px; } .rail nav .sep { margin: 6px 4px; } .rail .brand { padding-bottom: 12px; } .rail .org { margin-bottom: 8px; } }
.lb-head > .grow { flex: 1 1 340px; } .pg > .ph > .grow { flex: 1 1 280px; }
@media (max-width: 560px) { .lb-head .btn-group { width: 100%; } .lb-head .btn-group .btn { flex: 1 1 auto; } .pvc-h .btn { margin-left: auto; } }
#tab > .row > div.grow { flex: 1 1 280px; }

/* ================================================================== stage 6: tagging and equipment, faults, energy, mobile, assistant, devices */
.show-s { display: none; }
.mb { margin-bottom: 16px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 12.5px; margin: 14px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.err.small, small.err { color: var(--bad); }
select.sm { min-height: 32px; padding: 4px 30px 4px 9px; font-size: 13px; width: auto; }

/* tag chips (Haystack markers and value tags) */
.tchips { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.tch { display: inline-flex; align-items: center; gap: 4px; font: 500 12px/1.5 var(--fm); padding: 0 7px; border-radius: 4px; background: var(--green-soft); color: var(--green-ink); border: 1px solid transparent; white-space: nowrap; }
.tch b { font-weight: 400; color: var(--ink-2); padding-left: 4px; border-left: 1px solid color-mix(in srgb, var(--green-ink) 30%, transparent); }
.tch.v { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }
.tch.bad { background: var(--bad-soft); color: var(--bad); }
.tch.more, .tch.muted { background: transparent; color: var(--muted); border-color: var(--line); }
.tch button { background: none; border: 0; padding: 0; margin-left: 2px; color: inherit; opacity: .6; cursor: pointer; display: grid; }
.tch button:hover { opacity: 1; } .tch button svg.i { width: 13px; height: 13px; }
.tedit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--line-2); border-radius: var(--r-s); padding: 7px 9px; background: var(--surface); min-height: 46px; cursor: text; }
.tedit:focus-within { border-color: var(--green); box-shadow: var(--focus); }
.tedit .tchips { gap: 6px; } .tedit .tch { font-size: 13px; padding: 2px 6px 2px 9px; }
.tedit input { border: 0 !important; box-shadow: none !important; flex: 1 1 180px; min-height: 30px; padding: 2px 4px; font-family: var(--fm); font-size: 13.5px; }
.ac-list { list-style: none; margin: 4px 0 0; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); max-height: 260px; overflow: auto; position: relative; z-index: 5; }
.ac-list li { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13.5px; align-items: baseline; }
.ac-list li b { font-family: var(--fm); font-weight: 600; } .ac-list li .k { font-size: 11.5px; color: var(--muted); justify-self: end; }
.ac-list li small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.ac-list li[aria-selected="true"], .ac-list li:hover { background: var(--green-soft); }

/* the Haystack query box */
.qbox { display: grid; gap: 6px; position: relative; }
.qbox > label { font-weight: 600; font-size: 13.5px; color: var(--ink-2); }
.qb-in { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); border-radius: var(--r-s); background: var(--surface); padding: 0 10px; transition: border-color .12s; }
.qb-in:focus-within { border-color: var(--green); box-shadow: var(--focus); }
.qbox.bad .qb-in { border-color: var(--bad-fill); } .qbox.good .qb-in { border-color: color-mix(in srgb, var(--green) 60%, var(--line-2)); }
.qb-in input { border: 0 !important; box-shadow: none !important; padding-left: 0; padding-right: 0; flex: 1; font-size: 14px; min-width: 0; }
.qb-ic { color: var(--muted); display: grid; } .qbox.good .qb-ic { color: var(--green-ink); } .qbox.bad .qb-ic { color: var(--bad); }
.qb-n { font: 600 12.5px var(--f); color: var(--ink-2); white-space: nowrap; background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; padding: 1px 9px; }
.qb-n:empty { display: none; } .qb-n .spin { width: 11px; height: 11px; vertical-align: -1px; }
.qbox.compact .qb-in input { min-height: 34px; font-size: 13px; }
.qb-s { font-size: 12.5px; min-height: 1.4em; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.qb-s:empty { min-height: 0; }
.qb-err { color: var(--bad); display: inline-flex; gap: 5px; align-items: center; } .qb-ok { color: var(--green-ink); display: inline-flex; gap: 5px; align-items: center; } .qb-warn { color: var(--warn); display: inline-flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.qb-s svg.i { width: 14px; height: 14px; }
.qb-pos { font-size: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; white-space: pre; }
.qb-pos mark { background: var(--bad-fill); color: #fff; border-radius: 2px; padding: 0 1px; }

/* equipment browser */
.eqb { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.eqb-tree { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow: auto; }
.eqb-th { padding: 12px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.eqs { padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.eqs-h { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; padding: 7px 14px; font: 600 13px var(--f); color: var(--ink-2); cursor: pointer; text-align: left; }
.eqs-h:hover, .eqs-h.on { background: var(--surface-2); } .eqs-h.on { color: var(--ink); box-shadow: inset 3px 0 0 var(--green); }
.eqs-h svg.i { width: 15px; height: 15px; color: var(--muted); }
.eqs .cnt, .eqn .cnt { font: 500 11.5px var(--f); color: var(--muted); }
.eqsp { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 14px 4px 36px; } .eqsp .tag { font-size: 11px; } .eqsp svg.i { width: 12px; height: 12px; }
.eqn { display: flex; align-items: center; gap: 8px; padding: 5px 14px 5px calc(14px + var(--d) * 16px); text-decoration: none; color: var(--ink); font-size: 13.5px; }
.eqn:hover { background: var(--surface-2); } .eqn.on { background: var(--green-soft); }
.eqn svg.i { width: 15px; height: 15px; color: var(--green-ink); }
.eqn small { display: block; color: var(--muted); font: 11.5px var(--fm); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.eqb-q .pb { padding: 14px 16px; }
.eq-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.3fr); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-top: 14px; }
.eq-sum > div, .eq-sum > a { padding: 14px 16px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; position: relative; }
.eq-sum > :first-child { border-left: 0; }
.eq-sum b { font: 700 26px/1.1 var(--fd); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.eq-sum span { font-size: 12.5px; color: var(--muted); }
.eq-bar { display: block; height: 4px; background: var(--line); border-radius: 4px; margin-top: 6px; overflow: hidden; } .eq-bar i { display: block; height: 100%; background: var(--green); }
.eq-cta { flex-direction: row !important; align-items: center; gap: 12px !important; text-decoration: none; color: inherit; background: #000; color: #fff !important; }
.eq-cta svg.i { width: 26px; height: 26px; color: var(--green); } .eq-cta b { font: 600 15px var(--f); display: block; } .eq-cta small { color: #AEB9B1; font-size: 12.5px; }
.eq-cta:hover { background: #16201B; }
:root[data-theme="dark"] .eq-cta { background: var(--surface-2); }
.eq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.eq-card { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; text-decoration: none; color: inherit; transition: border-color .12s, box-shadow .12s, transform .12s; min-width: 0; }
.eq-card:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-1px); }
.eq-card b { font: 600 15.5px var(--fd); display: block; } .eq-card small { display: block; color: var(--muted); font-size: 12.5px; }
.eq-ic, .eq-hic { width: 38px; height: 38px; border-radius: 9px; background: #000; color: var(--green); display: grid; place-items: center; flex: none; }
:root[data-theme="dark"] .eq-ic, :root[data-theme="dark"] .eq-hic { background: var(--surface-2); border: 1px solid var(--line); }
.eq-mk { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.eq-n { text-align: right; font-size: 11.5px; color: var(--muted); } .eq-n b { font: 700 18px var(--fd); color: var(--ink); }

/* the equipment page */
.eq-hero { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; position: relative; overflow: hidden; }
.eq-hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--off); }
.eq-hero.ok::before { background: var(--green); } .eq-hero.bad::before { background: var(--bad-fill); } .eq-hero.warn::before { background: var(--warn-fill); }
.eq-hic { width: 52px; height: 52px; border-radius: 12px; } .eq-hic svg.i { width: 28px; height: 28px; }
.eq-hero h1 { font-size: 28px; }
.eq-hm { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.eq-hs { margin-top: 8px; } .eq-hs a { color: var(--ink-2); } .eq-hs .led { width: 7px; height: 7px; box-shadow: none; }
.eq-act { margin-left: auto; }
.eq-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.eq-strip > * { padding: 10px 16px; border-left: 1px solid var(--line); text-decoration: none; color: var(--muted); font-size: 12.5px; }
.eq-strip > :first-child { border-left: 0; } .eq-strip a:hover { background: var(--surface-2); }
.eq-strip b { display: block; font: 700 22px/1.15 var(--fd); color: var(--ink); font-variant-numeric: tabular-nums; } .eq-strip b.bad { color: var(--bad); } .eq-strip b.warn { color: var(--warn); }
.eq-h2 { margin: 22px 0 10px; display: flex; align-items: center; gap: 10px; font-size: 17px; }
.eq-h2 .led { width: 7px; height: 7px; }
.kvt { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.kv-t { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px 10px; display: flex; flex-direction: column; min-width: 0; position: relative; }
.kv-t.stale { opacity: .7; }
.kv-l { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.kv-l .tag { font-size: 10.5px; padding: 0 5px; }
.kv-v { font: 600 28px/1.15 var(--fd); letter-spacing: -.02em; margin-top: 4px; }
.kv-v small { font: 500 13px var(--f); color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.kv-v .onoff { font-size: 16px; padding: 3px 12px; }
.kv-s { display: flex; justify-content: space-between; gap: 8px; font: 11.5px var(--fm); margin-top: 2px; }
.kv-t .spark { height: 32px; margin-top: 6px; } .kv-sp { height: 32px; margin-top: 6px; }
.kv-cmd { margin-top: 8px; align-self: flex-start; }
.eq-cols { margin-top: 20px; }
.eq-lg { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; } .eq-lg span { display: inline-flex; align-items: center; gap: 5px; font: 12px var(--fm); color: var(--ink-2); } .eq-lg i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
table.eq-pts td.eq-pv { white-space: nowrap; font-family: var(--fm); font-size: 13px; }
.fd-mini { list-style: none; margin: 0; padding: 0; }
.fd-mini a { display: flex; gap: 10px; align-items: flex-start; padding: 10px 18px; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 13.5px; }
.fd-mini li:first-child a { border-top: 0; } .fd-mini a:hover { background: var(--surface-2); }
.fd-mini small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.en-mini { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 10px; } .en-mini > div { display: flex; flex-direction: column; }
.en-mini b { font: 700 22px/1.15 var(--fd); letter-spacing: -.01em; } .en-mini b.good { color: var(--green-ink); } .en-mini b.bad { color: var(--bad); } .en-mini span { font-size: 12.5px; color: var(--muted); }
.en-mini.big b { font-size: 26px; } .en-mini.big { margin-top: 4px; }

/* auto-tag review */
.rv-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 20px; margin-bottom: 14px; }
.rv-hero { display: flex; gap: 16px; align-items: center; }
.rv-n { font: 700 46px/1 var(--fd); letter-spacing: -.03em; color: var(--green-ink); min-width: 70px; }
.rv-hero b { font: 600 17px var(--fd); } .rv-hero p { margin: 4px 0 0; max-width: 70ch; }
.rv-conf { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.rv-hist { display: flex; align-items: flex-end; gap: 3px; height: 54px; }
.rv-hist button { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; width: 34px; height: 100%; background: none; border: 0; cursor: pointer; padding: 0; }
.rv-hist i { width: 24px; background: var(--line-2); border-radius: 3px 3px 0 0; transition: background .12s; display: block; }
.rv-hist button[aria-pressed="true"] i { background: var(--green); }
.rv-hist small { font: 10.5px var(--fm); color: var(--muted); }
.rv-eqp .ph h2 { display: flex; align-items: center; gap: 8px; }
.rv-eqs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; padding: 12px 18px; }
.rv-eq { display: flex; gap: 10px; align-items: center; border: 1.5px solid var(--line); border-radius: 9px; padding: 9px 12px; cursor: pointer; background: var(--surface); }
.rv-eq:has(input:checked) { border-color: var(--green); background: var(--green-soft); }
.rv-eq input { width: 17px; height: 17px; accent-color: var(--green); }
.rv-eq b { font-size: 14px; } .rv-eq small { display: block; color: var(--muted); font-size: 12px; }
.rv-src { font: 600 11px var(--f); text-transform: uppercase; letter-spacing: .03em; padding: 2px 7px; border-radius: 4px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.rv-src.learned { background: var(--green-soft); color: var(--green-ink); border-color: var(--green-line); } .rv-src.studio { background: #000; color: #fff; border-color: #000; } .rv-src.device { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
:root[data-theme="dark"] .rv-src.studio { background: var(--ink); color: #000; }
.conf { display: inline-block; width: 64px; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; vertical-align: middle; }
.conf.big { width: 90px; } .conf i { display: block; height: 100%; background: var(--green); }
.conf i.md { background: var(--warn-fill); } .conf i.lo { background: var(--bad-fill); }
td .conf + small { display: inline; margin-left: 8px; }
.rv-cb { width: 38px; } .rv-cb input { width: 17px; height: 17px; accent-color: var(--green); }
table.rv-t tr.sel td, table.t tr.sel td { background: var(--green-soft); }
table.rv-t td:nth-child(3) { max-width: 420px; }

/* faults */
.fd-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 0; background: #000; color: #fff; border-radius: var(--r); overflow: hidden; }
:root[data-theme="dark"] .fd-hero { border: 1px solid var(--line); }
.fd-hero > div { padding: 22px 24px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fd-hero > div + div { border-left: 1px solid #1F2A23; }
.fd-k { font-size: 13px; color: #AEB9B1; font-weight: 500; }
.fd-cost b { font: 700 50px/1.05 var(--fd); letter-spacing: -.03em; color: #fff; }
.fd-rate b { font: 700 38px/1.05 var(--fd); letter-spacing: -.02em; color: var(--warn-fill); } .fd-rate b small { font: 500 16px var(--f); color: #AEB9B1; margin-left: 2px; }
.fd-sub { font-size: 13px; color: #AEB9B1; }
.fd-counts { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px !important; align-content: center; }
.fd-c { background: #0D1410; border: 1px solid #1F2A23; border-radius: 9px; color: #fff; padding: 8px 10px; text-align: left; cursor: pointer; font: inherit; display: flex; flex-direction: column; }
.fd-c b { font: 700 24px/1.1 var(--fd); color: #6E7B72; } .fd-c span { font-size: 11.5px; color: #AEB9B1; }
.fd-c.has b { color: #fff; } .fd-c.has.bad b { color: #FF8A80; } .fd-c.has.warn b { color: var(--warn-fill); }
.fd-c:hover { border-color: #3A4A40; } .fd-c[aria-pressed="true"] { border-color: var(--green); box-shadow: inset 0 -3px 0 var(--green); }
.fd-sev { grid-column: 1 / -1; display: flex; gap: 2px; height: 8px; border-radius: 8px; overflow: hidden; margin-top: 8px; }
.fd-sev i { display: block; } .fd-sev .s-critical { background: var(--p-critical); } .fd-sev .s-high { background: var(--p-high); } .fd-sev .s-medium { background: var(--p-medium); } .fd-sev .s-low { background: var(--p-low); } .fd-sev .s-none { background: #26342C; }
.fd-sevl { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 12px; color: #AEB9B1; } .fd-sevl b { color: #fff; }
.fd-sevl .prio { background: transparent; border-color: #26342C; color: #C9D3CC; }
.fd-cols { align-items: start; } .fd-note { margin: 8px 0 0; }
.fd-lf { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.fd-lf .search-in { flex: 1 1 240px; } .fd-lf .search-in input { min-height: 36px; }
.fd-list .ph .seg button { padding: 6px 10px; }
table.fd-t tr td:first-child small svg.i { width: 13px; height: 13px; vertical-align: -2px; }
table.fd-t tbody tr { position: relative; }
table.fd-t tbody tr td:first-child { box-shadow: inset 4px 0 0 var(--sevc, transparent); }
table.fd-t tr.sev-critical { --sevc: var(--p-critical); } table.fd-t tr.sev-high { --sevc: var(--p-high); } table.fd-t tr.sev-medium { --sevc: var(--p-medium); } table.fd-t tr.sev-low { --sevc: var(--p-low); }
.fd-burn { color: var(--warn) !important; font-weight: 600; }
.fst { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1 var(--f); color: var(--muted); white-space: nowrap; }
.fst i { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--off); flex: none; }
.fst.open i { border-color: var(--bad-fill); } .fst.open.on i { background: var(--bad-fill); animation: blink 1.4s steps(2, start) infinite; } .fst.open { color: var(--ink); }
.fst.acknowledged i { border-color: var(--warn-fill); } .fst.acknowledged.on i { background: var(--warn-fill); }
.fst.closed i { border-color: var(--green); background: var(--green); }
.fi-head { display: flex; gap: 16px 24px; align-items: flex-start; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; position: relative; overflow: hidden; }
.fi-head::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--sevc, var(--off)); }
.fi-head.sev-critical { --sevc: var(--p-critical); } .fi-head.sev-high { --sevc: var(--p-high); } .fi-head.sev-medium { --sevc: var(--p-medium); } .fi-head.sev-low { --sevc: var(--p-low); }
.fi-head h1 { margin-top: 10px; font-size: 27px; } .fi-tgt { margin: 6px 0 0; font-size: 15px; } .fi-tgt a { color: var(--ink); font-weight: 600; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; } .fi-tgt a:hover { text-decoration: underline; }
.fi-act { margin-left: auto; }
.fi-kpi { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.fi-kpi > div { padding: 12px 16px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fi-kpi > :first-child { border-left: 0; } .fi-kpi span { font-size: 12.5px; color: var(--muted); }
.fi-kpi b { font: 700 22px/1.15 var(--fd); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fi-kpi small { font-size: 12px; color: var(--muted); }
.fi-kpi > :first-child b { color: var(--warn); }
.fi-info { margin-top: 12px; }
.fi-roles { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 4px 16px 14px; font-size: 12.5px; }
.fi-roles i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.fi-roles i.shade { background: color-mix(in srgb, var(--warn-fill) 35%, transparent); border-top: 3px solid var(--warn-fill); height: 11px; }
.fi-roles b { font-family: var(--fm); font-weight: 600; margin-right: 4px; }
.fi-rule h3 { font: 600 13px var(--f); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 16px 0 6px; }
.fi-check { margin: 0; padding-left: 20px; } .fi-check li { margin: 3px 0; }
.fi-cond { font: 13px/1.5 var(--fm); background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; padding: 10px 12px; white-space: pre-wrap; margin: 0 0 6px; }
.fi-tl { padding: 14px 18px 4px; max-height: 620px; overflow: auto; }
.rl-cat { margin-bottom: 22px; } .rl-cat h2 { margin-bottom: 10px; font-size: 17px; }
.rl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.rl-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.rl-card.off { opacity: .66; } .rl-card h3 { font-family: var(--fd); font-size: 15.5px; } .rl-card h3 a { color: var(--ink); text-decoration: none; } .rl-card h3 a:hover { text-decoration: underline; }
.rl-why { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rl-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; color: var(--muted); } .rl-meta svg.i { width: 14px; height: 14px; margin-right: 3px; }
.rl-f { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--line); padding-top: 8px; margin-top: auto; }
.ru-cols { align-items: start; }
.ru-roles, .ru-params { display: grid; gap: 8px; margin-bottom: 8px; }
.ru-role { border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; background: var(--surface-2); display: grid; gap: 6px; }
.ru-role .row { gap: 8px 14px; } .ru-rn { width: 140px !important; min-height: 32px !important; padding: 4px 8px !important; font-weight: 600; }
.ru-param { display: grid; grid-template-columns: 110px minmax(0, 1fr) 80px 70px 70px 64px auto; gap: 6px; align-items: center; }
.ru-param input { min-height: 34px; padding: 5px 8px; font-size: 13px; }
.ru-cond textarea { font-size: 14px; min-height: 76px; } .ru-cond textarea.bad { border-color: var(--bad-fill); }
.ru-help { margin-top: 6px; } .ru-help p { margin: 6px 0 0; line-height: 1.6; }
.ru-save { gap: 10px; } .ru-save input { flex: 1 1 220px; width: auto; }
.ru-test { border-color: var(--green-line); }
.tt-sum { display: flex; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--surface-2); }
.tt-sum > b { font: 700 40px/1 var(--fd); color: var(--muted); min-width: 48px; text-align: center; } .tt-sum.hit > b { color: var(--warn); }
.tt-sum p { margin: 0 0 2px; font-weight: 600; }
.tt-na { margin-top: 12px; font-size: 13px; background: var(--warn-soft); border-radius: 8px; padding: 10px 12px; } .tt-na ul { margin: 6px 0 0; padding-left: 18px; }

/* charts (stage 6) */
.c6 { position: relative; }
.c6-svg { display: block; width: 100%; height: auto; overflow: visible; }
.c6-grid { stroke: var(--line); stroke-width: 1; } .c6-base { stroke: var(--line-2); stroke-width: 1; }
.c6-ax { font: 11px var(--f); fill: var(--muted); font-variant-numeric: tabular-nums; }
.c6-unit { font: 600 11px var(--f); fill: var(--ink-2); }
.c6-cmp { opacity: .26; }
.c6-col.mk { filter: brightness(1.15); }
.c6-hl { fill: color-mix(in srgb, var(--ink) 6%, transparent); pointer-events: none; }
.c6-cross { stroke: var(--ink); stroke-width: 1; opacity: .4; }
.c6-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; box-shadow: var(--shadow); padding: 8px 10px; font-size: 12.5px; min-width: 130px; max-width: 280px; }
.c6-tip .tt { font-weight: 600; margin-bottom: 3px; } .c6-tip small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.c6-tip table { border-collapse: collapse; } .c6-tip td { padding: 1px 0; } .c6-tip td + td { padding-left: 12px; text-align: right; }
.c6-tip i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.c6-tip small.up { color: var(--warn); display: inline; } .c6-tip small.down { color: var(--green-ink); display: inline; }
.c6-lg { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); }
.c6-lg span { display: inline-flex; align-items: center; gap: 6px; }
.c6-lg i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.c6-lg i.hatch, .c6-lg i.hatch-p { background: repeating-linear-gradient(45deg, var(--muted) 0 2px, transparent 2px 5px); opacity: .7; }
.c6-lg i.hatch-p { background: repeating-linear-gradient(45deg, var(--os-0) 0 2px, color-mix(in srgb, var(--os-0) 15%, transparent) 2px 5px); opacity: 1; }
.hb { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hb li > a, .hb li > div { display: grid; gap: 5px; padding: 7px 8px; border-radius: 8px; text-decoration: none; color: inherit; }
.hb li > a:hover { background: var(--surface-2); }
.hb-n { display: flex; gap: 10px; align-items: baseline; } .hb-n b { font-weight: 600; font-size: 14px; } .hb-n small { display: block; font-size: 12px; color: var(--muted); }
.hb-r { font: 700 12px var(--fm); color: var(--faint); width: 16px; } .hb-v { font-weight: 600; font-size: 14px; white-space: nowrap; }
.hb-t { display: block; height: 7px; background: var(--surface-2); border-radius: 7px; margin-left: 26px; overflow: hidden; } .hb-t i { display: block; height: 100%; border-radius: 7px; }
.hm { display: grid; gap: 3px; }
.hm-hh, .hm-r { display: grid; grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 3px; align-items: center; }
.hm-hh span { font: 10.5px var(--fm); color: var(--faint); text-align: left; }
.hm-d { font: 600 11.5px var(--f); color: var(--muted); }
.hm-c { display: block; height: 22px; border-radius: 4px; }
.hm-c.nd { background: repeating-linear-gradient(45deg, var(--line) 0 2px, transparent 2px 5px); }
.hm-c:hover { outline: 2px solid var(--ink); outline-offset: -1px; }
.hm-key { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.hm-key > i { width: 140px; height: 8px; border-radius: 8px; display: inline-block; }
.hm-nd { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; } .hm-nd .hm-c { width: 16px; height: 10px; display: inline-block; }
.sl { display: grid; gap: 4px; }
.sl-axis, .sl-r { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; align-items: center; }
.sl-ticks { position: relative; height: 16px; } .sl-ticks i { position: absolute; font-style: normal; transform: translateX(-50%); } .sl-ticks b { font: 10.5px var(--fm); color: var(--faint); font-weight: 400; white-space: nowrap; }
.sl-n { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sl-n small { color: var(--muted); margin-left: 6px; }
.sl-t { position: relative; height: 20px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.sl-t s { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.sl-t i { position: absolute; top: 3px; bottom: 3px; background: var(--warn-fill); border-radius: 3px; min-width: 4px; cursor: default; }
.sl-t i.on { background: var(--bad-fill); }

/* energy */
.en-bar { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.en-site select { min-width: 200px; }
.en-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.en-kpi { text-align: left; font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; position: relative; overflow: hidden; transition: border-color .12s, box-shadow .12s; }
.en-kpi::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--uc); opacity: .35; }
.en-kpi.on { border-color: color-mix(in srgb, var(--uc) 60%, var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--uc) 60%, transparent), var(--shadow); }
.en-kpi.on::before { opacity: 1; }
.en-kpi:hover { border-color: var(--line-2); }
.en-kh { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); font-weight: 600; }
.en-kh svg.i { color: var(--uc); }
.en-kv { font: 700 40px/1.05 var(--fd); letter-spacing: -.03em; } .en-kv small { font: 500 15px var(--f); color: var(--muted); margin-left: 5px; letter-spacing: 0; }
.en-ch { font-size: 13px; font-weight: 600; color: var(--muted); } .en-ch.up { color: var(--warn); } .en-ch.down { color: var(--green-ink); }
.en-kf { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 8px; margin-top: 2px; } .en-kf b { color: var(--ink); font-size: 13.5px; }
.en-bl { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; font-weight: 600; border-radius: 7px; padding: 4px 8px; align-self: flex-start; }
.en-bl.good { background: var(--green-soft); color: var(--green-ink); } .en-bl.bad { background: var(--warn-soft); color: var(--warn); } .en-bl svg.i { width: 15px; height: 15px; }
.en-main .ph h2 { display: flex; gap: 8px; align-items: center; }
.en-lg { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; } .en-lg svg.i { width: 14px; height: 14px; vertical-align: -2px; }
.en-sub { margin: 0 0 12px; }
.en-pat, .en-low { align-items: start; }
.mtree { display: grid; gap: 2px; }
.mt-n { padding-left: calc(var(--d) * 20px); position: relative; }
.mt-n + .mt-n[style*="--d:1"], .mt-n[style*="--d:2"] { }
.mt-r { display: flex; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 8px; text-decoration: none; color: inherit; }
a.mt-r:hover { background: var(--surface-2); }
.mt-r small { display: block; color: var(--muted); font-size: 12px; }
.mt-i { width: 26px; height: 26px; border-radius: 7px; display: inline-grid; place-items: center; background: color-mix(in srgb, var(--uc, var(--muted)) 16%, var(--surface)); color: var(--uc, var(--muted)); flex: none; vertical-align: middle; }
.mt-i svg.i { width: 15px; height: 15px; }
.mt-v { font-weight: 600; white-space: nowrap; } .mt-v small { color: var(--muted); font-weight: 400; margin-left: 4px; }
.mt-bar { display: block; height: 4px; background: var(--surface-2); border-radius: 4px; margin: 0 8px 4px 44px; overflow: hidden; } .mt-bar i { display: block; height: 100%; background: var(--uc, var(--muted)); border-radius: 4px; }
.mt-n.unm .mt-r { border: 1px dashed var(--line-2); } .mt-n.unm .mt-i { background: var(--surface-2); color: var(--muted); } .mt-n.unm .mt-bar i { background: repeating-linear-gradient(45deg, var(--muted) 0 2px, transparent 2px 5px); }
.mt-n.unm.neg .mt-r { border-color: var(--bad-fill); background: var(--bad-soft); } .mt-n.unm.neg .mt-i { color: var(--bad); }
.mt-sug { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; } .mt-sug .tp-b.on { border-color: var(--green); background: var(--green-soft); }
.tf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
.tf-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.tf-card h3 { font-family: var(--fd); font-size: 16.5px; }
.tf-bands { display: flex; flex-wrap: wrap; gap: 8px; }
.tf-b { display: flex; flex-direction: column; border-left: 4px solid var(--bc); padding: 2px 10px; font-size: 12px; color: var(--muted); } .tf-b b { font: 700 17px var(--fd); color: var(--ink); }
.tf-week { display: grid; gap: 2px; font: 10.5px var(--fm); color: var(--muted); }
.tf-week > div { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 6px; align-items: center; }
.tf-h { display: grid; grid-template-columns: repeat(24, 1fr); gap: 1px; } .tf-h i { height: 9px; border-radius: 1px; }
.tf-band { border: 1px solid var(--line); border-left: 4px solid var(--bc); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; display: grid; gap: 6px; }
.tf-w { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; } .tf-w input[type=time] { width: 116px; min-height: 34px; padding: 4px 8px; }
.tp-tot { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 8px; } .tp-tot b { font: 700 34px var(--fd); letter-spacing: -.02em; } .tp-tot span { color: var(--muted); }
.tp-bar { display: flex; gap: 2px; height: 14px; border-radius: 6px; overflow: hidden; margin-bottom: 10px; } .tp-bar i { display: block; }
table.t .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; vertical-align: -1px; }
.ef-t td.own { background: var(--green-soft); } .ef-t th .tag { font-size: 10.5px; } .ef-t th small { display: block; font-weight: 400; color: var(--muted); }
.ef-src { display: grid; gap: 12px; font-size: 13px; } .ef-ed { border-left: 3px solid var(--line-2); padding-left: 12px; } .ef-ed.chk { border-left-color: var(--warn-fill); } .ef-ed a { word-break: break-all; }

/* QR labels */
.lb-cols { align-items: start; grid-template-columns: 380px minmax(0, 1fr); }
.lb-sizes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lb-sz { border: 1.5px solid var(--line-2); border-radius: 9px; padding: 10px; cursor: pointer; display: grid; gap: 4px; justify-items: start; }
.lb-sz:has(input:checked) { border-color: var(--green); background: var(--green-soft); }
.lb-sz input { position: absolute; opacity: 0; } .lb-sz small { color: var(--muted); font-size: 11.5px; }
.lb-g { display: grid; gap: 2px; width: 46px; height: 64px; padding: 3px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 2px; align-content: start; } .lb-g i { background: var(--line-2); border-radius: 1px; height: 6px; }
.lb-paper { background: var(--surface-2); padding: 20px; display: grid; place-items: center; min-height: 400px; }
.lb-paper img { width: min(100%, 560px); background: #fff; box-shadow: 0 12px 40px -16px rgba(0, 0, 0, .45); }

/* phone home */
.ph-home { max-width: 560px; margin: 0 auto; }
.ph-hi { font: 600 22px var(--fd); margin: 0 0 14px; }
.ph-inst { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; background: #000; color: #fff; border: 0; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; cursor: pointer; font: inherit; }
.ph-inst svg.i:first-child { width: 26px; height: 26px; color: var(--green); } .ph-inst small { display: block; color: #AEB9B1; font-size: 12.5px; }
.ph-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ph-t { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 2px; border-top: 4px solid var(--green); }
.ph-t.warn { border-top-color: var(--warn-fill); } .ph-t.bad { border-top-color: var(--bad-fill); }
.ph-t span { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); font-weight: 600; }
.ph-t b { font: 700 40px/1.05 var(--fd); letter-spacing: -.03em; } .ph-t small { font-size: 12.5px; color: var(--muted); }
.ph-q { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0 4px; }
.ph-q a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink-2); font-size: 12px; font-weight: 600; }
.ph-q a svg.i { width: 22px; height: 22px; color: var(--green-ink); }
.ph-h { font-size: 17px; margin: 18px 0 10px; }
.ph-sites { display: grid; gap: 10px; }
.ph-site { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ph-sh { display: flex; gap: 10px; align-items: center; padding: 12px 14px 4px; text-decoration: none; color: var(--ink); } .ph-sh b { font: 600 16px var(--fd); }
.ph-sf { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 2px 14px 10px; font-size: 12.5px; color: var(--muted); align-items: center; }
.ph-sa { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line); background: var(--surface-2); overflow-x: auto; } .ph-sa .btn { flex: none; }

/* passkeys, push */
.pk-l li, .pu-l li { padding-left: 0; padding-right: 0; } .pk-alt { margin-top: 6px; }
.tb-inst { margin-left: 4px; }

/* the assistant */
.as-fab { position: fixed; right: 22px; bottom: 22px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; background: #000; color: #fff; border: 1px solid #000; border-radius: 99px; padding: 11px 18px 11px 14px; font: 600 14px var(--f); cursor: pointer; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .55); transition: transform .12s; }
.as-fab svg.i { color: var(--green); width: 20px; height: 20px; } .as-fab:hover { transform: translateY(-2px); }
:root[data-theme="dark"] .as-fab { border-color: var(--line-2); background: var(--surface-2); }
body.as-open .as-fab { display: none; }
body.as-open .toasts { right: 460px; }
.as-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); z-index: 45; background: var(--surface); border-left: 1px solid var(--line); box-shadow: -24px 0 60px -30px rgba(0, 0, 0, .5); display: flex; flex-direction: column; animation: slidein .18s ease-out; }
.as-h { display: flex; align-items: center; gap: 10px; padding: 12px 10px 12px 16px; border-bottom: 1px solid var(--line); background: #000; color: #fff; }
.as-h b { font: 600 15.5px var(--fd); } .as-h small { display: block; color: #AEB9B1; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 260px; }
.as-h .btn { color: #C7D0C9; } .as-h .btn:hover { background: #16201B; color: #fff; }
.as-logo { width: 32px; height: 32px; border-radius: 9px; background: #16201B; display: grid; place-items: center; color: var(--green); flex: none; }
:root[data-theme="dark"] .as-h { background: var(--surface-2); }
.as-body { flex: 1; overflow: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 14px; }
.as-convs { position: absolute; top: 57px; left: 0; right: 0; bottom: 0; background: var(--surface); z-index: 2; overflow: auto; }
.as-convs ul { list-style: none; margin: 0; padding: 0; } .as-convs li { display: flex; align-items: center; border-bottom: 1px solid var(--line); padding-right: 8px; }
.as-ch { display: flex; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.as-c { flex: 1; text-align: left; background: none; border: 0; padding: 10px 16px; cursor: pointer; font: inherit; color: var(--ink); } .as-c:hover, .as-c.on { background: var(--surface-2); }
.as-c b { display: block; font-size: 14px; } .as-c small { color: var(--muted); font-size: 12px; }
.as-hello { text-align: center; padding: 20px 10px; color: var(--muted); }
.as-big { width: 56px; height: 56px; border-radius: 16px; background: #000; color: var(--green); display: inline-grid; place-items: center; margin-bottom: 12px; } .as-big svg.i { width: 30px; height: 30px; }
.as-hello h3 { font: 600 18px var(--fd); color: var(--ink); margin-bottom: 6px; }
.as-sugg { display: grid; gap: 6px; margin-top: 16px; }
.as-s { text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font: 500 13.5px var(--f); color: var(--ink); cursor: pointer; } .as-s:hover { border-color: var(--green); background: var(--green-soft); }
.as-m { display: flex; gap: 8px; align-items: flex-start; }
.as-m.u { justify-content: flex-end; } .as-m.u .as-b { background: var(--ink); color: var(--surface); border-radius: 14px 14px 4px 14px; padding: 9px 13px; max-width: 85%; font-size: 14px; }
.as-av { width: 26px; height: 26px; border-radius: 8px; background: #000; color: var(--green); display: grid; place-items: center; flex: none; margin-top: 2px; } .as-av svg.i { width: 15px; height: 15px; }
:root[data-theme="dark"] .as-av, :root[data-theme="dark"] .as-big { background: var(--surface-2); }
.as-m.a .as-b { flex: 1; min-width: 0; font-size: 14px; line-height: 1.55; }
.as-t h3, .as-t h4 { font: 600 16px var(--fd); margin: 2px 0 6px; } .as-t h4 { font-size: 14.5px; }
.as-t p { margin: 0 0 8px; } .as-t ul, .as-t ol { margin: 0 0 8px; padding-left: 20px; } .as-t li { margin: 2px 0; }
.as-t code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; font-size: 12.5px; }
.as-t .tbl-wrap { margin: 4px 0 10px; border: 1px solid var(--line); border-radius: 8px; } .as-tbl { font-size: 12.5px; } .as-tbl th, .as-tbl td { padding: 6px 10px !important; }
.as-tools { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; } .as-tools:empty { display: none; }
.as-tool { display: inline-flex; align-items: center; gap: 5px; font: 500 11.5px var(--f); color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; padding: 2px 9px 2px 6px; }
.as-tool svg.i { width: 13px; height: 13px; } .as-tool.ok svg.i { color: var(--green-ink); } .as-tool.err, .as-tool.ref { color: var(--warn); } .as-tool .spin { width: 11px; height: 11px; } .as-tool small { color: var(--faint); font-family: var(--fm); }
.as-dots { display: inline-flex; gap: 4px; padding: 6px 0; } .as-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: beat2 1s ease-in-out infinite; } .as-dots i:nth-child(2) { animation-delay: .15s; } .as-dots i:nth-child(3) { animation-delay: .3s; }
.as-m.streaming .as-t > :last-child::after { content: "▍"; color: var(--green); animation: blink 1s steps(2, start) infinite; margin-left: 1px; }
.as-chart { border: 1px solid var(--line); border-radius: 10px; margin: 6px 0 10px; overflow: hidden; background: var(--surface); }
.as-cht { display: flex; align-items: center; gap: 8px; padding: 8px 10px 0 12px; } .as-cht b { font-size: 13px; } .as-cht small { color: var(--muted); font-size: 11.5px; flex: 1; }
.as-chc { padding: 0 4px; } .as-chc canvas.hc { cursor: crosshair; }
.as-chlg { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 0 12px 8px; font-size: 12px; } .as-chlg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.as-chl { display: flex; gap: 6px; align-items: center; padding: 14px; color: var(--muted); font-size: 12.5px; }
.as-cards { display: grid; gap: 8px; } .as-cards:empty { display: none; }
.as-card { border: 1.5px solid var(--warn-fill); border-radius: 12px; background: linear-gradient(180deg, var(--warn-soft), var(--surface) 70%); padding: 12px 12px 10px; display: grid; gap: 8px; }
.as-card.st-confirmed { border-color: var(--green-line); background: var(--green-soft); } .as-card.st-dismissed, .as-card.st-expired { border-color: var(--line); background: var(--surface-2); opacity: .8; }
.as-ch2 { display: flex; gap: 10px; align-items: flex-start; } .as-ch2 b { font-size: 14px; } .as-ch2 small { display: block; color: var(--muted); font-size: 11.5px; }
.as-ci { width: 30px; height: 30px; border-radius: 8px; background: #000; color: var(--warn-fill); display: grid; place-items: center; flex: none; } .as-ci svg.i { width: 16px; height: 16px; }
.as-card.st-confirmed .as-ci { color: var(--green); }
.as-ext { color: var(--muted); }
.as-cd { margin-top: 8px; }
.as-cdl { margin: 4px 0; padding-left: 18px; max-height: 220px; overflow: auto; }
.as-cdl code { white-space: pre-wrap; word-break: break-word; }
.as-cx pre { max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word; margin: 4px 0 0; }
.as-cs { font-size: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.as-cb { display: flex; gap: 6px; flex-wrap: wrap; } .as-cn { margin: 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .as-cn.ok { color: var(--green-ink); } .as-cn svg.i { width: 15px; height: 15px; }
.as-err { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--bad); background: var(--bad-soft); border-radius: 8px; padding: 8px 10px; } .as-err.cancelled { color: var(--muted); background: var(--surface-2); }
.as-in { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px 6px; border-top: 1px solid var(--line); }
.as-in textarea { min-height: 42px; max-height: 160px; resize: none; font-size: 14px; border-radius: 12px; }
.as-in .btn { min-height: 42px; border-radius: 12px; } .as-in .btn.stop { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.as-foot { display: flex; gap: 8px; align-items: center; padding: 0 14px 10px; font-size: 12px; }
#as-use { display: inline-flex; align-items: center; gap: 8px; }
.as-meter { display: inline-block; width: 60px; height: 5px; background: var(--line); border-radius: 5px; overflow: hidden; } .as-meter i { display: block; height: 100%; background: var(--green); } .as-meter i.warn { background: var(--warn-fill); } .as-meter i.bad { background: var(--bad-fill); }
.as-usage { display: flex; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; } .as-usage div { display: flex; flex-direction: column; } .as-usage b { font: 700 22px var(--fd); } .as-usage span { font-size: 12.5px; color: var(--muted); }

/* devices */
.dv-sum { display: flex; flex-wrap: wrap; align-items: stretch; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.dv-big { padding: 14px 20px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--line); min-width: 170px; box-shadow: inset 4px 0 0 var(--green); }
.dv-big.warn { box-shadow: inset 4px 0 0 var(--warn-fill); } .dv-big.bad { box-shadow: inset 4px 0 0 var(--bad-fill); }
.dv-big b { font: 700 34px/1.05 var(--fd); letter-spacing: -.02em; } .dv-big b small { font: 500 16px var(--f); color: var(--muted); margin-left: 4px; } .dv-big span { font-size: 12.5px; color: var(--muted); }
.dv-f { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 0; border-right: 1px solid var(--line); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; min-width: 104px; }
.dv-f b { font: 700 22px var(--fd); } .dv-f span:last-child { font-size: 12px; color: var(--muted); } .dv-f .led { margin-bottom: 4px; }
.dv-f.none b { color: var(--faint); } .dv-f:hover { background: var(--surface-2); } .dv-f.on { background: var(--surface-2); box-shadow: inset 0 -3px 0 var(--ink); }
.dv-pts { padding: 12px 18px; display: flex; flex-direction: column; justify-content: center; margin-left: auto; } .dv-pts b { font: 700 22px var(--fd); } .dv-pts span { font-size: 12px; color: var(--muted); }
.dv-t tr.c-offline td:first-child, .dv-t tr.c-error td:first-child { box-shadow: inset 4px 0 0 var(--bad-fill); } .dv-t tr.c-partial td:first-child { box-shadow: inset 4px 0 0 var(--warn-fill); }
.dv-t tr.c-disabled td { color: var(--muted); }
.dv-err { color: var(--bad) !important; display: flex !important; gap: 5px; align-items: center; } .dv-err svg.i { width: 13px; height: 13px; flex: none; }
.dv-c { font-size: 12px; }
.dv-json { font: 12px/1.5 var(--fm); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; max-height: 50vh; overflow: auto; white-space: pre; }
.dt-card.k-builtin::before { background: var(--ink); } .dt-chk { color: var(--warn); margin: 0; display: flex; gap: 6px; } .dt-chk svg.i { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.dm-dev { border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; margin-bottom: 8px; display: grid; gap: 6px; background: var(--surface-2); }
.dm-dev input, .dm-dev select { min-height: 32px; padding: 4px 8px; font-size: 13px; width: auto; }
.dm-a { gap: 8px 14px; } .dm-a label { display: inline-flex; gap: 6px; align-items: center; }
.pv-dev { border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; display: grid; gap: 8px; }
.dv-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; } .dv-check small { display: block; color: var(--muted); font-size: 12px; } .dv-check.ok svg.i { color: var(--add); } .dv-check.bad svg.i { color: var(--rem); }
.pk-hs { margin-left: 4px; white-space: nowrap; color: var(--muted); }
.hx-qd { margin-top: 8px; } .hx-qd summary { cursor: pointer; color: var(--green-ink); } .hx-qd .qbox { margin: 8px 0; }

@media (max-width: 1180px) {
  .fd-hero { grid-template-columns: 1fr 1fr; } .fd-counts { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid #1F2A23; }
  .eq-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } .eq-sum > :nth-child(n) { border-left: 0; border-top: 1px solid var(--line); } .eq-sum > :nth-child(2n) { border-left: 1px solid var(--line); } .eq-sum > :nth-child(-n+2) { border-top: 0; } .eq-cta { grid-column: 1 / -1; border-left: 0 !important; }
  .lb-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .eqb { grid-template-columns: minmax(0, 1fr); } .eqb-tree { position: static; max-height: 320px; }
  .fi-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fi-kpi > :nth-child(n) { border-left: 0; border-top: 1px solid var(--line); } .fi-kpi > :nth-child(2n) { border-left: 1px solid var(--line); } .fi-kpi > :nth-child(-n+2) { border-top: 0; } .fi-kpi > :first-child { grid-column: 1 / -1; } .fi-kpi > :nth-child(2) { border-left: 0; border-top: 1px solid var(--line); } .fi-kpi > :nth-child(3) { border-left: 1px solid var(--line); border-top: 1px solid var(--line); } .fi-kpi > :nth-child(4) { border-left: 0; } .fi-kpi > :nth-child(5) { border-left: 1px solid var(--line); }
  .rv-top { grid-template-columns: minmax(0, 1fr); } .rv-conf { align-items: flex-start; }
  .eq-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .eq-strip > :nth-child(3) { border-left: 0; } .eq-strip > :nth-child(n+3) { border-top: 1px solid var(--line); }
  .eq-act { margin-left: 0; width: 100%; } .fi-act { margin-left: 0; }
  .ru-param { grid-template-columns: 1fr 1fr 1fr; }
  body.as-open .toasts { right: 20px; }
  .tb-inst span { display: none; }
}
@media (max-width: 560px) {
  .show-s { display: block; margin-top: 4px; } .show-s .prio { margin-right: 6px; }
  .fd-hero { grid-template-columns: minmax(0, 1fr); } .fd-hero > div + div { border-left: 0; border-top: 1px solid #1F2A23; } .fd-hero > div { padding: 16px 18px; } .fd-cost b { font-size: 40px; }
  .fd-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eq-sum b { font-size: 22px; } .eq-hero { padding: 16px; } .eq-hero h1 { font-size: 23px; } .eq-hic { width: 44px; height: 44px; }
  .kvt { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .kv-t { padding: 10px 12px 8px; } .kv-v { font-size: 22px; } .kv-s span:last-child { display: none; }
  .en-kv { font-size: 34px; } .rl-grid, .tf-grid, .rv-eqs { grid-template-columns: minmax(0, 1fr); }
  .hm-hh, .hm-r { grid-template-columns: 28px repeat(24, minmax(0, 1fr)); gap: 1px; } .hm-c { height: 16px; border-radius: 2px; } .hm-hh span { font-size: 9px; }
  .sl-axis, .sl-r { grid-template-columns: 96px minmax(0, 1fr); }
  .as-panel { width: 100vw; } .as-fab { right: 14px; bottom: 14px; padding: 12px; } .as-fab span { display: none; }
  .dv-big { min-width: 0; flex: 1 1 100%; border-right: 0; border-bottom: 1px solid var(--line); } .dv-f { flex: 1 1 30%; min-width: 0; padding: 10px 12px; }
  .fd-list .ph .seg { overflow-x: auto; max-width: 100%; }
  .en-bar .seg { max-width: 100%; overflow-x: auto; }
  .ph-q { grid-template-columns: repeat(4, 1fr); }
}
@media print { .as-fab, .as-panel { display: none !important; } }

.filters .field.segf { flex: none; min-width: 0; } .field > .seg { justify-self: start; max-width: 100%; }
.eq-cta span, .eq-cta b { color: #fff !important; } .eq-cta small { color: #AEB9B1 !important; }
/* phone: fault dashboard filters in a compact block, the hero comes into view sooner */
@media (max-width: 600px) {
  .fd-f { gap: 8px; }
  .fd-f .field:first-child { flex: 1 1 100%; }
  .fd-f .field.segf .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fd-f .seg button { padding-left: 8px; padding-right: 8px; }
}
#fi-ev > .pb { padding: 14px 18px; }
/* room under the last panel so the "Ask Atlas" button never covers it */
#view::after { content: ""; display: block; height: 56px; }

/* ---------------- 2.9 KOTE Query */
.kq { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.kq-side { position: sticky; top: 12px; max-height: calc(100vh - 120px); overflow: auto; }
.kq-side > .ph { padding: 12px 14px; }
.kq-list { display: grid; gap: 2px; padding: 6px; }
.kq-item { display: grid; text-align: left; gap: 2px; padding: 8px 10px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--ink); cursor: pointer; font: inherit; font-size: 13.5px; }
.kq-item:hover { background: var(--surface-2); }
.kq-item.on { background: var(--surface-2); border-color: var(--green); }
.kq-item small { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kq-ex { color: var(--green-ink); }
.kq-pad { padding: 8px 14px 14px; }
.kq-help summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.kq-help pre { background: var(--surface-2); border-radius: 8px; padding: 10px; font-size: 12px; white-space: pre-wrap; }
.kq-main { display: grid; gap: 12px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.kq-main > * { min-width: 0; }
.kq-row select, .kq-cond select, .kq-row input, .kq-cond input { width: auto; max-width: 100%; }
.kq-row select, .kq-cond select { min-width: 0; }
.kq-top { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.kq-top h2 { font-size: 17px; margin: 0 0 6px; }
.kq-site { margin: 0; min-width: 180px; }
.kq-row, .kq-cond, .kq-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kq-row { margin: 8px 0; }
.kq-conds { display: grid; gap: 6px; }
.kq-cond { background: var(--surface-2); border-radius: 10px; padding: 6px 8px; }
.kq-cond input { min-width: 120px; flex: 1 1 140px; max-width: 280px; }
.kq-cond [data-x] { margin-left: auto; }
.kq-num { width: 90px; }
.kq-pvrow code { color: var(--green-ink); font-size: 12.5px; word-break: break-word; }
.kq-text { width: 100%; min-height: 76px; font-size: 14px; line-height: 1.5; resize: vertical; box-sizing: border-box; }
.kq-chk { font-size: 13.5px; margin-top: 6px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.kq-chk.ok { color: var(--green-ink); } .kq-chk.bad { color: var(--bad); }
.kq-chk .qb-pos { display: block; width: 100%; }
.kq-auto { font-size: 13.5px; display: inline-flex; gap: 6px; align-items: center; }
.kq-sum { font-size: 13.5px; color: var(--muted); }
.kq-sum b { color: var(--ink); }
.kq-tw { max-height: calc(100vh - 380px); min-height: 160px; overflow: auto; }
.kq-t th { position: sticky; top: 0; cursor: pointer; z-index: 1; }
.kq-t td { white-space: nowrap; max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
.kq-t td.err { color: var(--bad); font-weight: 600; }
.kq-t td.warn-t { color: var(--warn); font-weight: 600; }
.kq-t .kq-pick { width: 34px; }
.kq-t .num { font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .kq { grid-template-columns: minmax(0, 1fr); } .kq-side { position: static; max-height: none; order: 2; } .kq-main { order: 1; } .kq-cond input { flex-basis: 100%; max-width: none; } .kq-site { min-width: 0; flex: 1 1 100%; } }

/* ---- batch editing from Query (2.10) */
dialog.kq-bd { width: min(1100px, calc(100vw - 24px)); }
dialog.kq-bd .db { max-height: calc(100vh - 180px); overflow: auto; }
.kqb-steps { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; margin: 0 0 12px; padding: 0; }
.kqb-steps li { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 12.5px; }
.kqb-steps li.on { background: var(--green-soft); color: var(--green-ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--green-line); }
.kqb-lead { margin: 0 0 10px; }
.kqb-ops { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.kqb-op { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.kqb-op select { max-width: 100%; }
.kqb-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #fff; font-size: 12px; flex: none; }
.kqb-args { align-items: flex-end; }
.kqb-f { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; min-width: 180px; flex: 1 1 200px; }
.kqb-f span { color: var(--muted); }
.kqb-c { font-size: 13px; white-space: nowrap; }
.kqb-num input { width: 70px; }
.kqb-tokens { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.kqb-chip { border: 1px dashed var(--line); background: transparent; color: inherit; border-radius: 6px; padding: 2px 7px; font-size: 12px; cursor: pointer; }
.kqb-chip:hover, .kqb-chip:focus-visible { border-style: solid; border-color: var(--green); }
.kqb-sum { margin: 6px 0 8px; }
.kqb-tw { max-height: 52vh; overflow: auto; }
.kqb-t td small { display: block; color: var(--muted); }
.kqb-t del { background: rgba(220, 60, 60, .18); color: inherit; text-decoration: line-through; }
.kqb-t ins { background: rgba(40, 170, 90, .2); color: inherit; text-decoration: none; }
.kqb-t td.kqb-b, .kqb-t td.kqb-a { font-family: var(--fm); font-size: 12.5px; word-break: break-word; }
.kqb-t tr.kqb-warn td:last-child { color: var(--warn); }
.kqb-t tr.kqb-error td:last-child { color: var(--bad); }
.kqb-t tr.kqb-same, .kqb-t tr.kqb-skip { opacity: .6; }
.kqb-confirm h3 { margin: 0 0 8px; }
.kqb-confirm ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.kqb-hist { display: flex; flex-direction: column; gap: 8px; }
.kqb-hi { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.kqb-hi small { display: block; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 640px) { .kqb-f { min-width: 0; flex-basis: 100%; } }

/* ---- bulk engineering from Query (2.11) */
.kqk-grid { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: 10px; }
.kqk-grid .kqb-f { flex: 1 1 220px; }
.kqb-f.kqk-wide, .kqk-wide { flex: 1 1 100% !important; margin: 0; }
.kqb-f.kqk-small { flex: 0 1 120px; min-width: 100px; }
.kqk-pick { display: flex; gap: 6px; } .kqk-pick input { flex: 0 1 140px; min-width: 90px; } .kqk-pick select { flex: 1 1 auto; min-width: 180px; }
.kqk-pins select { min-width: 190px; } .kqk-pins .kqk-pat { width: min(300px, 100%); } .kqk-pins .kqk-units { width: 80px; margin-left: 6px; }
.kqk-dir { display: inline-block; min-width: 26px; font: 600 10.5px var(--fm); text-transform: uppercase; color: var(--muted); }
.kqk-rename { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; margin-bottom: 6px; }
.kq-bd h4 { margin: 12px 0 6px; font-size: 13px; }
.kq-bulkbar { display: contents; }
.kqc-check { border: 1px solid var(--line); border-radius: var(--r); padding: 8px 12px; margin: 6px 0; background: var(--surface); }
.kqc-check summary { cursor: pointer; display: flex; gap: 8px; align-items: center; }
.kqc-check summary small { margin-left: auto; color: var(--muted); }
.kqc-check .kq-row { margin: 8px 0; }
.kqc-count { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); font: 600 12px var(--fm); }
.kqc-high .kqc-count { background: var(--bad-fill); color: #fff; } .kqc-medium .kqc-count { background: var(--warn-fill); color: #1b1300; }
.kqc-items td small { display: block; color: var(--muted); }
.kqc-ok { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); margin-top: 10px; } .kqc-ok span { white-space: nowrap; }
/* 2.16: Haystack query switch in the graphics editor's point picker */
.kge-pp .kg-hs-m { margin: 2px 0 6px; min-height: 1em; }
.kge-pp .kg-mono { font-family: var(--fm); }
.kge-pp .kg-hs-err { color: var(--bad); }