/* Stellarius debug badges: deterministic geometry + runtime text fitting. */
:root {
  --stellarius-user-debug-badge-width: 52px;
  --stellarius-user-debug-badge-height: 28px;
  --stellarius-dev-debug-badge-width: 52px;
  --stellarius-dev-debug-badge-height: 28px;
  --stellarius-debug-badge-gap: 6px;
  --stellarius-dev-debug-badge-gap: 4px;
}

/* User debug: compact left-aligned flow, maximum four badges per row. */
.user-debug-readout {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  align-content: flex-start !important;
  gap: var(--stellarius-debug-badge-gap) !important;
  width: min(100%, calc(4 * var(--stellarius-user-debug-badge-width) + 3 * var(--stellarius-debug-badge-gap))) !important;
  max-width: calc(4 * var(--stellarius-user-debug-badge-width) + 3 * var(--stellarius-debug-badge-gap)) !important;
  margin-inline: 0 !important;
}

.user-debug-badge {
  box-sizing: border-box !important;
  width: var(--stellarius-user-debug-badge-width) !important;
  min-width: var(--stellarius-user-debug-badge-width) !important;
  max-width: var(--stellarius-user-debug-badge-width) !important;
  height: var(--stellarius-user-debug-badge-height) !important;
  min-height: var(--stellarius-user-debug-badge-height) !important;
  max-height: var(--stellarius-user-debug-badge-height) !important;
  flex: 0 0 var(--stellarius-user-debug-badge-width) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 6px !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  text-align: center !important;
  line-height: 1 !important;
  --stellarius-badge-font-max: 11;
  --stellarius-badge-font-min: 6.5;
}

/* Dev Toolbar: deterministic fixed geometry. The status strip is rebuilt
   explicitly by main.js from the known native chips, so no badge relies on the
   DebugToolbar's original intrinsic sizing or flex-shrink rules. */
#debug-toolbar .debug-toolbar__status-row {
  min-width: 0 !important;
  width: max-content !important;
  max-width: none !important;
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: var(--stellarius-dev-debug-badge-width) !important;
  align-items: center !important;
  justify-content: start !important;
  gap: var(--stellarius-dev-debug-badge-gap) !important;
  margin-top: 6px !important;
  overflow: visible !important;
}

#debug-toolbar .stellarius-debug-status-badge,
#debug-toolbar .debug-toolbar__fps-badge,
#debug-toolbar .debug-toolbar__texture-format-badge,
#debug-toolbar .technical-chip.stellarius-debug-status-badge {
  box-sizing: border-box !important;
  inline-size: var(--stellarius-dev-debug-badge-width) !important;
  min-inline-size: var(--stellarius-dev-debug-badge-width) !important;
  max-inline-size: var(--stellarius-dev-debug-badge-width) !important;
  block-size: var(--stellarius-dev-debug-badge-height) !important;
  min-block-size: var(--stellarius-dev-debug-badge-height) !important;
  max-block-size: var(--stellarius-dev-debug-badge-height) !important;
  width: var(--stellarius-dev-debug-badge-width) !important;
  min-width: var(--stellarius-dev-debug-badge-width) !important;
  max-width: var(--stellarius-dev-debug-badge-width) !important;
  height: var(--stellarius-dev-debug-badge-height) !important;
  min-height: var(--stellarius-dev-debug-badge-height) !important;
  max-height: var(--stellarius-dev-debug-badge-height) !important;
  flex: none !important;
  flex-basis: auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 5px !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  text-align: center !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  font-family: "Space Mono", monospace !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  --stellarius-badge-font-max: 10;
  --stellarius-badge-font-min: 6.25;
}

/* Some native chips contain a nested node with its own font shorthand. It must
   inherit the fitted font size or the parent can be correct while the visible
   text remains oversized/clipped. */
#debug-toolbar .stellarius-debug-status-badge > * {
  max-width: 100% !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  white-space: inherit !important;
}

#debug-toolbar .stellarius-debug-status-separator {
  display: none !important;
}

/* Dev Toolbar heading: compact single-line title. */
#debug-toolbar .debug-toolbar__heading > span {
  display: none !important;
}

#debug-toolbar .debug-toolbar__heading {
  gap: 0 !important;
}

#debug-toolbar .debug-toolbar__heading strong {
  font-size: 13px !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .055em !important;
}