:root {
  color-scheme: dark;
  --bg: #101114;
  --ink: #e7e1d6;
  --muted: #8d887f;
  --line: #262931;
  --pull: #ff9b3d;
  --push: #4ed08a;
  --hold: #8d95a3;
  --alarm: #ff4d5f;
  --offline: #5f6672;
  --watch: #d8b46a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 13px/1.5 "Segoe UI", sans-serif;
}

header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: baseline;
  padding: 18px 24px 10px;
  border-bottom: 1px solid var(--line);
}

.brand-row { display: flex; align-items: center; gap: 18px; }
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.brand-mark {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: block;
}
.nav { display: flex; gap: 2px; }
.nav button {
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--muted);
  padding: 4px 10px 6px;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav button.on { color: var(--ink); border-bottom-color: var(--ink); }
.nav button:hover { color: var(--ink); }

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.stats b {
  color: var(--ink);
  font-weight: 550;
  margin-left: 5px;
}

.stats .flagged b { color: var(--alarm); }

.clock {
  flex: none;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  white-space: nowrap;
}

.clock b {
  color: var(--ink);
  font-weight: 550;
  margin-left: 6px;
}

main {
  position: relative;
  height: calc(100% - 54px);
  display: grid;
  grid-template-columns: 1fr 400px;
}

#day {
  position: absolute;
  z-index: 3;
  top: 14px;
  left: 14px;
  width: min(232px, 70vw);
  padding: 8px 10px 6px;
  background: rgba(16, 17, 20, 0.9);
  border: 1px solid var(--line);
  pointer-events: none;
}

.day-kicker {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.day-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.day-row b { color: var(--ink); font-weight: 450; }
.day-row .ercot { color: var(--watch); font-weight: 450; }

.day-svg { display: block; width: 100%; height: 32px; margin-top: 2px; }
.day-demand { fill: none; stroke: var(--ink); stroke-width: 1.25; }
.day-price { fill: none; stroke: var(--watch); stroke-width: 1.25; }
.day-forecast { fill: none; stroke: var(--muted); stroke-width: 1.25; stroke-dasharray: 3 3; }
.day-now { stroke: var(--line); stroke-width: 1; }
.day-now-dot { fill: var(--ink); }
.day-toggle {
  pointer-events: auto;
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 5px 6px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  font: inherit;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.day-toggle:hover { color: var(--ink); border-color: var(--ink); }
.day-toggle.on { color: var(--watch); border-color: var(--watch); }

#back {
  position: absolute;
  z-index: 3;
  top: 14px;
  left: 260px;
  padding: 9px 14px;
  background: #1a1c21;
  border: 1px solid #5d584e;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#back:hover { border-color: var(--ink); }

#stage {
  position: absolute;
  z-index: 3;
  left: 14px;
  bottom: 14px;
  width: min(228px, 42vw);
  padding: 8px 10px 8px;
  background: rgba(16, 17, 20, 0.9);
  border: 1px solid #5d584e;
  pointer-events: none;
}

#stage.in { animation: stage-in 0.7s ease; }

@keyframes stage-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.stage-kicker {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#stage .stage-kicker { font-size: 10px; }

#stage-title {
  margin: 1px 0 0;
  font-size: 15px;
  font-weight: 550;
  letter-spacing: 0.02em;
}

#stage-sub { margin: 1px 0 6px; color: var(--muted); font-size: 11px; line-height: 1.35; }

#stage-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

#decisions {
  flex: 0 0 auto;
  max-height: 188px;
  padding: 8px 22px 14px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
}

main.collapsed #decisions { display: none; }

#decision-log {
  overflow: auto;
  max-height: 148px;
}

.decision {
  display: grid;
  grid-template-columns: 4.8em auto minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 1px;
  align-items: baseline;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

.decision b {
  grid-column: 2 / -1;
  color: var(--ink);
  font-weight: 500;
  min-width: 0;
  overflow-wrap: anywhere;
}
.decision .push { color: var(--push); }
.decision .pull { color: var(--pull); }
.decision .hold { color: var(--hold); }
.decision .alarm { color: var(--alarm); }

.decision button {
  justify-self: start;
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.key.alarm i { background: var(--alarm); }

main.collapsed { grid-template-columns: 1fr 40px; }

#panel-toggle {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
  padding: 14px 22px 8px;
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
}

main.collapsed aside { padding: 10px 0; overflow: hidden; }
main.collapsed #panel-body { display: none; }
main.collapsed #panel-toggle {
  writing-mode: vertical-rl;
  height: calc(100% - 20px);
  margin: 0;
  text-align: center;
  letter-spacing: 0.2em;
}

canvas { width: 100%; height: 100%; display: block; cursor: grab; }
#arch,
#protocols,
#api {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 4;
  flex-direction: column;
  padding: 18px 28px 16px;
  background: var(--bg);
}
body[data-view="architecture"] main,
body[data-view="protocols"] main,
body[data-view="api"] main { grid-template-columns: 1fr; }
body[data-view="architecture"] #arch { display: flex; }
body[data-view="protocols"] #protocols { display: flex; }
body[data-view="api"] #api { display: flex; }
body[data-view="architecture"] #panel,
body[data-view="architecture"] #day,
body[data-view="architecture"] #stage,
body[data-view="architecture"] #back,
body[data-view="protocols"] #panel,
body[data-view="protocols"] #day,
body[data-view="protocols"] #stage,
body[data-view="protocols"] #back,
body[data-view="api"] #panel,
body[data-view="api"] #day,
body[data-view="api"] #stage,
body[data-view="api"] #back { display: none; }
body[data-view="architecture"] canvas,
body[data-view="protocols"] canvas,
body[data-view="api"] canvas { visibility: hidden; }
#arch-role {
  margin: 8px 0 12px;
  min-height: 2.8em;
  max-width: 68em;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
#arch-diagram { flex: 1; min-height: 0; overflow: auto; }
.arch-svg { display: block; width: 100%; height: auto; }
.diagram .arch-region { fill: #14161a; stroke: #262931; }
.diagram .arch-label {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: #5a5f68;
}
#proto-live,
#api-live {
  margin: 6px 0 14px;
  max-width: 68em;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}
.proto-grid {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  max-width: 72em;
  padding-bottom: 20px;
}
.proto-ladder { grid-column: 1 / -1; }
.proto-card {
  margin: 0;
  padding: 14px 16px 16px;
  background: #14161a;
  border: 1px solid var(--line);
}
.proto-card h2 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 550;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.proto-card p,
.proto-card li {
  margin: 0 0 8px;
  color: var(--muted);
  line-height: 1.45;
}
.proto-card p:last-child,
.proto-card li:last-child { margin-bottom: 0; }
.proto-card .push { color: var(--push); }
.proto-card .pull { color: var(--pull); }
.proto-card .hold { color: var(--hold); }
.proto-card ol,
.proto-card ul {
  margin: 0;
  padding-left: 1.2em;
}
.proto-words {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px 18px;
}
.proto-words li { margin: 0; }
.proto-words li.on { color: var(--ink); }
.proto-card [data-proto].on,
.proto-card ol li.on,
.proto-card ul:not(.proto-words) li.on {
  color: var(--ink);
}
.proto-card code { color: var(--ink); font-size: 12px; }
.proto-card pre {
  margin: 10px 0 0;
  padding: 10px 12px;
  overflow: auto;
  background: #0c0d10;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.4;
}
.api-routes {
  width: 100%;
  border-collapse: collapse;
}
.api-routes th,
.api-routes td {
  text-align: left;
  vertical-align: top;
  padding: 6px 12px 6px 0;
  border-bottom: 1px solid var(--line);
}
.api-routes th {
  font-size: 11px;
  font-weight: 550;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.api-routes td:first-child,
.api-routes th:first-child { white-space: nowrap; }

#tip {
  position: fixed;
  z-index: 2;
  padding: 6px 9px;
  background: #1a1c21;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
}

#tip b { color: var(--ink); font-weight: 550; margin-right: 4px; }

aside {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
  overflow: hidden;
}

#panel-body {
  flex: 1;
  overflow: auto;
  padding: 8px 22px 32px;
}

h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 550;
  letter-spacing: 0.02em;
}

.sub, .muted { color: var(--muted); }
.sub { font-size: 12px; margin-top: 3px; }
.key { display: inline-flex; align-items: center; gap: 5px; }
.key i { width: 6px; height: 6px; border-radius: 50%; }
.key.push i { background: var(--push); }
.key.pull i { background: var(--pull); }
.key.hold i { background: var(--hold); }

.mode {
  margin: 12px 0 4px;
  font-size: 12px;
  text-transform: lowercase;
}

.mode i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: 1px;
}

.pull i { background: var(--pull); }
.push i { background: var(--push); }
.hold i { background: var(--hold); }
.alarm i { background: var(--alarm); }
.offline i { background: var(--offline); }
.market { margin: 0; font-size: 18px; font-variant-numeric: tabular-nums; }
.market span { color: var(--muted); font-size: 12px; margin-left: 6px; }

.chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 14px 0 18px; }
.chips button {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 3px 10px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.chips button:hover { color: var(--ink); }
.chips button.on { color: var(--ink); border-color: #5d584e; }

.chart { margin: 0 0 16px; }
.chart h3 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 5px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 550;
}
.chart h3 span {
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.chart svg { width: 100%; height: 58px; display: block; }
.chart p { margin: 4px 0 0; font-size: 11px; }
.chart .flag { color: var(--alarm); }

.unit-log { margin-top: 18px; }
.unit-log summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.unit-log summary span { letter-spacing: 0; text-transform: none; }
.log-body { max-height: 220px; overflow: auto; margin-top: 8px; }
.log-line {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.log-line b { font-weight: 450; color: var(--ink); }
.log-line.push b { color: var(--push); }
.log-line.pull b { color: var(--pull); }
.log-line.hold b { color: var(--hold); }
.log-line.offline b { color: var(--offline); }
.log-line .flag { color: var(--alarm); }

.stack { margin-top: 22px; }
.ledger { margin-top: 12px; }
.ledger h3 { margin-top: 8px; }
.stack h3 {
  margin: 16px 0 6px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 550;
}
.stack p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.stack p span { flex: none; }
.stack p b {
  min-width: 0;
  color: var(--ink);
  font-weight: 450;
  text-align: right;
  overflow-wrap: anywhere;
}

.fold { margin-top: 2px; }
.fold-body { max-height: 220px; overflow: auto; }
.fold summary {
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 550;
  list-style: none;
}
.fold summary::-webkit-details-marker { display: none; }
.fold summary::before { content: "▸ "; }
.fold[open] summary::before { content: "▾ "; }
.fold summary .flag { color: var(--alarm); margin-left: 8px; letter-spacing: 0; text-transform: none; }
.fold summary .count { margin-left: 8px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.fold .roster, .fold .note { margin-top: 8px; }

/* fleet roster */

.group { margin-top: 20px; }
.group h3 {
  display: flex;
  justify-content: space-between;
  margin: 0 0 7px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 550;
}
.group h3 span { letter-spacing: 0; text-transform: none; }
.group h3 .flag { color: var(--alarm); }
.note { margin: 7px 0 0; font-size: 11px; }
.cases, .alerts { display: grid; gap: 6px; }
.case {
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--muted);
}
.case.status-pending { border-left-color: var(--watch); }
.case.status-active { border-left-color: var(--pull); }
.case.status-done, .case.status-cancelled { border-left-color: var(--line); }
.case-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.case-action { min-width: 0; font-weight: 550; font-size: 13px; overflow-wrap: anywhere; }
.case-meta { margin: 2px 0 0; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.timer { color: var(--ink); font-variant-numeric: tabular-nums; }
.case-site {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.case-site:hover { text-decoration: underline; }
.status {
  flex: none;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 99px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.status.pending { color: var(--watch); border-color: var(--watch); }
.status.active { color: var(--pull); border-color: var(--pull); }
.status.alarm { color: var(--alarm); border-color: var(--alarm); }
.alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 2px;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--alarm);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.alert .status { grid-row: 1 / span 2; }
.alert-id { min-width: 0; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.alert em {
  min-width: 0;
  color: var(--alarm);
  font-style: normal;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.alert:hover { border-color: #4a4f59; }
.alert.case-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}
.alert.case-row .status { grid-row: 1; grid-column: 1; }
.alert.case-row .alert-id { grid-row: 1; grid-column: 2; }
.alert.case-row .timer { grid-row: 1; grid-column: 3; }
.alert.case-row .case-step,
.alert.case-row .case-est,
.alert.case-row .escalation {
  grid-column: 1 / -1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.alert.case-row .case-step { color: var(--ink); font-size: 12px; }
.alert.case-row .case-evidence,
.alert.case-row .case-decision {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.alert.case-row .case-decision { color: var(--ink); }
.alert.case-row .case-decision b { color: var(--watch); font-weight: 600; }
.case-payload {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  max-height: 280px;
  overflow: auto;
  padding: 6px 8px;
  border: 1px solid var(--line);
  background: #101114;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
  white-space: pre-wrap;
  text-align: left;
}
.alert.case-row .case-est { color: var(--muted); font-size: 11px; }
.alert.case-row.status-pending { border-left-color: var(--watch); }
.alert.case-row.status-active { border-left-color: var(--pull); }
.alert.case-row.status-done,
.alert.case-row.status-cancelled { border-left-color: var(--line); }
.alert.case-row .status.pending { color: var(--watch); border-color: var(--watch); }
.alert.case-row .status.active { color: var(--pull); border-color: var(--pull); }
.alert.case-row .escalation {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.case .escalation { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.steps {
  display: grid;
  gap: 2px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.alert.case-row .steps { grid-column: 1 / -1; }
.step {
  display: grid;
  grid-template-columns: 4.6em 8.6em minmax(0, 1fr);
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.step b { color: var(--ink); font-weight: 500; font-size: 11px; }
.because { margin: 2px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.because mark {
  background: #3d3424;
  color: var(--ink);
  padding: 0 3px;
}
.because.procedure { color: var(--ink); }

.code-key { display: grid; gap: 10px; }
.code { margin: 0; }
.code b {
  display: block;
  color: var(--ink);
  font-weight: 550;
  font-size: 12px;
}
.code span { color: var(--muted); font-size: 12px; }
.action { margin: 6px 0 0; color: var(--ink); font-size: 12px; }

.roster { display: grid; gap: 3px; }
.unit-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 9px;
  background: transparent;
  border: 1px solid var(--line);
  font: inherit;
  font-size: 12px;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}
.unit-row i { flex: none; width: 6px; height: 6px; border-radius: 50%; }
.unit-row span { color: var(--ink); font-variant-numeric: tabular-nums; }
.unit-row em {
  margin-left: auto;
  font-style: normal;
  font-size: 11px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.unit-row:hover { border-color: #4a4f59; }
.unit-row.on { border-color: #6b6558; background: #171a1f; }
.unit-row.dim { opacity: 0.4; }

.metros { display: grid; }
.metro-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 2px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #1c1f25;
  font: inherit;
  font-size: 12px;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}
.metro-row:hover { color: var(--ink); }
.metro-row span { color: var(--ink); }
.metro-row em {
  margin-left: auto;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}
.metro-row b { width: 3.2em; text-align: right; font-weight: 450; font-variant-numeric: tabular-nums; }
.metro-row b.flag { color: var(--alarm); }

/* unit modal */

dialog#unit {
  width: min(1340px, 92vw);
  height: min(910px, 90vh);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 1px solid #2f333b;
  background: #13151a;
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
dialog#unit::backdrop { background: rgba(9, 10, 12, 0.76); backdrop-filter: blur(3px); }
dialog#unit[open] { display: flex; flex-direction: column; animation: pop 0.18s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } }

.unit { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.unit-head {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 18px 24px 16px;
  border-bottom: 1px solid var(--line);
}
.unit-head h2 { font-size: 18px; }
.unit-head-end { display: flex; align-items: center; gap: 18px; }
.unit-head-end .mode { margin: 0; }
#unit-close {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 4px 11px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
#unit-close:hover { color: var(--ink); border-color: #5d584e; }

.unit-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(340px, 40%) 1fr;
  grid-template-rows: minmax(0, 1fr);
}
.unit-chain {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 18px 22px 24px;
  border-right: 1px solid var(--line);
}
#unit-diagram { flex: 1; min-height: 0; }
.unit-chain-cap, .dt-cap {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5a5f68;
  margin-bottom: 10px;
}
.unit-detail {
  min-height: 0;
  padding: 18px 24px 28px;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.contract { margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.contract-fold { margin-top: 8px; }
.contract-fold .contract-json { margin-top: 8px; }
.dict-body { max-height: 280px; overflow: auto; margin-top: 8px; }
.dict-group {
  margin: 12px 0 6px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5a5f68;
}
.dict-group:first-child { margin-top: 0; }
.dict {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 0 0 4px;
}
.dict dt {
  color: var(--watch);
  font: 12px/1.45 ui-monospace, "Cascadia Mono", Consolas, monospace;
}
.dict dd { margin: 0; color: var(--ink); font-size: 12px; line-height: 1.45; }
.contract-json {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: #0c0d10;
  color: var(--muted);
  font: 12px/1.55 ui-monospace, "Cascadia Mono", Consolas, monospace;
  white-space: pre;
  overflow: auto;
}
.contract-json .k { color: var(--watch); }
.contract-json .term {
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
#contract-tip {
  position: fixed;
  z-index: 5;
  max-width: 280px;
  padding: 6px 9px;
  background: #1a1c21;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
}
.contract-json .v { color: var(--ink); }
.unit-detail, .unit-chain, aside { scrollbar-width: thin; scrollbar-color: #33373f transparent; }

.dt-name { margin: 16px 0 4px; font-size: 14px; font-weight: 550; }
.dt-role { margin: 0 0 4px; color: var(--muted); font-size: 12px; max-width: 46em; }
.dt-charts { margin-top: 26px; }
.dt-charts .dt-cap { margin-bottom: 14px; }

.unit-detail .stack { max-width: 540px; }
.unit-detail .stack.split {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--rows), auto);
  grid-template-columns: 1fr 1fr;
  column-gap: 44px;
  max-width: none;
}
.unit-detail .chart svg { width: 100%; height: 132px; }
.unit-detail .chart h3 { display: flex; justify-content: space-between; margin: 0 0 8px; font-size: 13px; font-weight: 550; }
.unit-detail .chart h3 span { color: var(--muted); font-weight: 450; }
.metric-link.on span { color: var(--ink); }

.dt-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 190px;
  padding: 24px 28px;
  border: 1px dashed #24272e;
}
.dt-empty p { margin: 0; font-size: 12px; }
.dt-empty .muted { max-width: 42em; }

/* Pushed to the foot of the column, so a component with one chart does not
   trail off into empty space. */
/* one-line diagram */

.diagram { width: 100%; height: 100%; display: block; }
.diagram .rail { stroke: #343840; stroke-width: 1; }
.diagram .rail.dotted { stroke-dasharray: 2 4; opacity: 0.7; }
.diagram .flow {
  stroke-dasharray: 4 9;
  stroke-linecap: round;
  fill: none;
  animation-name: flow;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes flow { to { stroke-dashoffset: -13; } }
.diagram .flow.pull { stroke: var(--pull); }
.diagram .flow.push { stroke: var(--push); }
.diagram .flow.hold { stroke: var(--hold); opacity: 0.75; }
.diagram .head.pull { fill: var(--pull); }
.diagram .head.push { fill: var(--push); }
.diagram .head.hold { fill: var(--hold); opacity: 0.75; }
.diagram .flow-kw { font-size: 10px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.diagram .flow-kw.pull { fill: var(--pull); }
.diagram .flow-kw.push { fill: var(--push); }
.diagram .flow-kw.idle { fill: #565b64; }
.diagram .rail-cap {
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: #5a5f68;
}

.diagram .blk { cursor: pointer; }
.diagram .blk:focus { outline: none; }
.diagram .blk-bg { fill: #181a20; stroke: #2f333b; transition: stroke 0.12s, fill 0.12s; }
.diagram .blk-edge { fill: #343840; }
.diagram .blk:hover .blk-bg, .diagram .blk:focus .blk-bg { stroke: #4e535d; }
.diagram .blk.on .blk-bg { fill: #1d2027; stroke: #6b6558; }
.diagram .blk.on .blk-edge { fill: var(--ink); }
.diagram .blk.flagged .blk-edge, .diagram .blk.flagged .blk-dot { fill: var(--alarm); }
.diagram .blk.watch .blk-edge, .diagram .blk.watch .blk-dot { fill: var(--watch); }
.diagram .blk-name { fill: var(--ink); font-size: 13px; font-weight: 550; }
.diagram .blk-note { fill: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.diagram .soc-track { fill: #262931; }
.diagram .soc-fill.pull { fill: var(--pull); }
.diagram .soc-fill.push { fill: var(--push); }
.diagram .soc-fill.hold { fill: var(--hold); }
.diagram .soc-fill.alarm { fill: var(--alarm); }

/* expandable charts */

.chart-head {
  display: block;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.chart-head:hover h3 { color: var(--ink); }
.chart .watch { color: var(--watch); }
.chart-facts {
  margin-top: 9px;
  padding: 10px 12px;
  background: #16181d;
  border: 1px solid var(--line);
}
.chart-facts p {
  display: flex;
  justify-content: space-between;
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.chart-facts p b { color: var(--ink); font-weight: 450; }

.metric-link {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  font: inherit;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: left;
  cursor: pointer;
}
.acts { margin: 2px 0 8px; }
.act {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.act b { display: block; font-size: 13px; font-weight: 550; }
.act span {
  display: block;
  margin-top: 2px;
  max-width: 38em;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.act.hot span { color: var(--alarm); }
.act-choice { display: flex; flex: none; gap: 6px; }
.act-btn {
  flex: none;
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: #181a20;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.act-btn:hover { border-color: #5d584e; }
.act-btn.on { color: var(--watch); border-color: var(--watch); }
.act-btn.hot { color: var(--alarm); border-color: var(--alarm); }
.act-btn.on.push { color: var(--push); border-color: var(--push); }
.act-btn.on.pull { color: var(--pull); border-color: var(--pull); }
.act-btn.on.hold { color: var(--hold); border-color: var(--hold); }
.metric-link.hot span, .metric-link.hot b { color: var(--alarm); }
.note.resolve { margin: 0 0 10px; line-height: 1.45; }
.note.resolve.flag { color: var(--alarm); }
.metric-link b { color: var(--ink); font-weight: 450; }
.metric-link:hover span { color: var(--ink); text-decoration: underline dotted; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .diagram .flow { animation: none; }
  dialog#unit[open] { animation: none; }
}

@media (max-width: 860px) {
  .unit-body { grid-template-columns: 1fr; grid-template-rows: auto auto; overflow: auto; }
  .unit-chain { border-right: 0; border-bottom: 1px solid var(--line); }
  .unit-detail { overflow: visible; }
  .unit-detail .stack.split { display: block; }
  #unit-diagram { flex: none; }
  .diagram { height: auto; }
}

@media (max-width: 900px) {
  main { grid-template-columns: 1fr; grid-template-rows: 1fr 320px; }
  main.collapsed { grid-template-columns: 1fr; grid-template-rows: 1fr 40px; }
  main.collapsed #panel-toggle { writing-mode: horizontal-tb; height: auto; }
  aside { border-left: 0; border-top: 1px solid var(--line); }
  .roster { grid-template-columns: 1fr 1fr 1fr; }
}