/* Developer-mode performance box (dev-perf.js). Loaded only when the backend sends X-Debug-Batch. */
.dev-perf {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 2147483000;
  max-width: min(820px, calc(100vw - 24px));
  font: 12px/1.4 var(--font-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  color: #e6edf3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.dev-perf button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
/* Fixed-width, right-aligned numbers: values change, positions do not. */
.dev-perf-n {
  display: inline-block;
  text-align: right;
  white-space: nowrap;
  flex: none;
}
.dev-perf-n small {
  font-size: inherit;
  color: #9aa7b3;
}
.dev-perf-pill {
  display: flex;
  align-items: baseline;
  gap: 4px;
  background: #1f2933ee;
  border: 1px solid #3b4754;
  border-radius: 999px;
  padding: 4px 12px;
  box-shadow: 0 2px 8px #0004;
}
.dev-perf-pill.is-heavy {
  border-color: #e5a50a;
}
.dev-perf-pill.is-heavy .dev-perf-n {
  color: #ffd166;
}
.dev-perf-panel {
  background: #161b22f5;
  border: 1px solid #3b4754;
  border-radius: 8px;
  padding: 10px;
  max-height: 60vh;
  overflow: auto;
  width: 100%;
  box-shadow: 0 6px 24px #0006;
}
.dev-perf-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  margin-bottom: 8px;
}
.dev-perf-head span {
  color: #9aa7b3;
}
.dev-perf-close {
  margin-left: auto;
  background: none;
  border: 1px solid #3b4754;
  border-radius: 4px;
  padding: 1px 8px;
}
.dev-perf table {
  border-collapse: collapse;
  width: 100%;
  table-layout: auto;
}
.dev-perf th,
.dev-perf td {
  text-align: left;
  padding: 2px 8px 2px 0;
  vertical-align: top;
  white-space: nowrap;
}
.dev-perf th {
  color: #9aa7b3;
  font-weight: 600;
  border-bottom: 1px solid #3b4754 !important;
}
.dev-perf th:nth-child(2),
.dev-perf th:nth-child(3),
.dev-perf th:nth-child(4) {
  text-align: right;
}
.dev-perf tr.dev-perf-batch td {
  padding-top: 6px;
  border-top: 1px solid #2b3540;
  color: #c9d4de;
  font-weight: 600;
}
.dev-perf tr:not(.dev-perf-batch) td.dev-perf-res {
  padding-left: 14px;
}
.dev-perf td.dev-perf-res {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dev-perf .dev-perf-tables {
  color: #9aa7b3;
  white-space: normal;
  font-weight: 400;
}
.dev-perf tr.is-heavy td,
.dev-perf tr.is-heavy .dev-perf-n {
  color: #ffd166;
}
.dev-perf h4 {
  margin: 10px 0 4px;
  font-size: inherit;
  color: #9aa7b3;
}
.dev-perf-history {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dev-perf-history button {
  display: flex;
  align-items: baseline;
  gap: 4px;
  width: 100%;
  background: none;
  border: 0;
  padding: 1px 0;
  text-align: left;
}
.dev-perf-history button.is-selected {
  background: #ffffff14;
}
.dev-perf-history button.is-heavy .dev-perf-n {
  color: #ffd166;
}
.dev-perf-at {
  width: 9ch;
  flex: none;
  color: #9aa7b3;
}
.dev-perf-label {
  margin-left: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #c9d4de;
}
/* The app's own table styles must not reach the box. */
.dev-perf table,
.dev-perf thead,
.dev-perf tbody,
.dev-perf tr,
.dev-perf th,
.dev-perf td {
  background: transparent;
  border-color: #2b3540;
  box-shadow: none;
  height: auto;
  font: inherit;
}
.dev-perf td {
  border-bottom: 0;
}

/* Fixed metric widths without inline styles (Tenner’s strict CSP). */
.dev-perf-width-5 {
  width: 5ch;
}
.dev-perf-width-6 {
  width: 6ch;
}
.dev-perf-width-7 {
  width: 7ch;
}
.dev-perf-width-9 {
  width: 9ch;
}
.dev-perf-width-10 {
  width: 10ch;
}