.machines-panel #machine-refresh { flex: none; white-space: nowrap; }

.machine-notice {
  margin: 13px var(--bay-padding) 0;
  padding: 8px 10px;
  border-left: 2px solid var(--bay-amber);
  background: #221d18;
  color: var(--bay-amber);
  font-size: 12px;
}

.machine-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr));
  gap: 11px;
  padding: 14px var(--bay-padding) 17px;
}
.machine-list:empty { padding-block: 8px; }
.machine-empty { grid-column: 1 / -1; padding: 12px 0; color: var(--bay-muted); }

.machine-card {
  --machine-state: var(--bay-muted);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--bay-border);
  border-top-color: color-mix(in srgb, var(--machine-state), var(--bay-border) 67%);
  border-radius: 4px;
  background: var(--bay-raised);
}
.machine-card[data-status="good"] { --machine-state: var(--bay-cyan); }
.machine-card[data-status="bad"] { --machine-state: var(--bay-red); }
.machine-card[data-status="stale"] { --machine-state: var(--bay-amber); }
.machine-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 5px 9px;
}
.machine-identity { min-width: 0; flex: 1 1 105px; overflow-wrap: anywhere; }
.machine-identity h3 { margin: 0; color: var(--bay-ice); font-size: 14px; line-height: 1.3; font-weight: 720; }
.machine-identity p { margin-top: 3px; color: var(--bay-muted); font-size: 11px; }
.machine-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--machine-state), var(--bay-border) 68%);
  border-radius: 3px;
  color: var(--machine-state);
  font-size: 11px;
  font-weight: 680;
}
.machine-status::before {
  width: 5px;
  height: 5px;
  border: 1px solid currentColor;
  border-radius: 50%;
  content: "";
}
.machine-card[data-status="good"] .machine-status::before { background: currentColor; }

.machine-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 8px; }
.machine-metrics > div + div { border-left: 1px solid var(--bay-border); padding-inline-start: 10px; }
.machine-metrics dt { color: var(--bay-muted); font-size: 11px; }
.machine-metrics dd {
  margin: 2px 0 0;
  color: var(--bay-ice);
  font: 650 22px/1.15 var(--mono);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.machine-metrics small { color: var(--bay-muted); font-size: 11px; }

.machine-trend, .machine-trend-empty {
  align-self: end;
  min-width: 0;
  min-height: 75px;
  margin: 0;
  padding: 5px 7px;
  border: 1px solid var(--bay-hairline);
  border-radius: 3px;
  background: var(--bay-field);
  color: var(--bay-muted);
  font-size: 11px;
}
.machine-trend figcaption { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; }
.machine-trend figcaption > span:last-child { font-family: var(--mono); }
.machine-trend svg { display: block; width: 100%; height: 50px; }
.machine-trend svg path { fill: none; vector-effect: non-scaling-stroke; }
.machine-trend-grid { stroke: var(--bay-border); stroke-width: 1; stroke-dasharray: 2 4; }
.machine-trend-line { stroke: var(--bay-cyan); stroke-width: 1.4; }
.machine-trend-dot { fill: var(--bay-cyan); }
.machine-trend-fail { stroke: var(--bay-red); stroke-width: 1.3; }
.machine-trend-empty { display: grid; place-items: center; }
.machine-checked { margin-top: 8px; color: var(--bay-muted); font-size: 11px; }
.machine-checked time { color: var(--bay-ice); font-family: var(--mono); font-variant-numeric: tabular-nums; }

@media (max-width: 380px) {
  .workspace .nav > a { gap: 4px; padding-inline: 2px; font-size: 11px; }
  .workspace .nav > a .icon { width: 13px; height: 13px; }
}

@media (max-width: 315px) {
  .workspace .nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}