.tyler-container {
  display: flex;
  flex-direction: column;
  gap: var(--tyler-gap, 14px);
  width: 100%;
}

.stats {
  margin: var(
    --stat-stack-margin,
    var(--stat-stack-margin-top, 18px) var(--stat-stack-margin-right, 0)
      var(--stat-stack-margin-bottom, 24px) var(--stat-stack-margin-left, 0)
  );
}

.tyler-tile {
  box-sizing: border-box;
  overflow: hidden;
  min-width: 0;
}

.tyler-row {
  display: flex;
  gap: var(--tyler-gap, 14px);
}

.tyler-tile .label,
.tyler-tile .value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:where(.stat, .status-card) {
  --status-bg: rgba(var(--status-unknown-rgb), 0.12);
  --status-border: rgb(var(--status-unknown-rgb));
}

:is(.stat, .status-card) {
  padding: 14px 16px;
  background: transparent;
  border-radius: 0 8px 8px 0;
  border-inline-start: 4px solid var(--status-border);
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--status-border) 20%, transparent);
}

.stat .label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-label);
  margin-bottom: 6px;
  display: block;
}

.stat .value {
  font-size: clamp(1.15rem, calc(1.35rem - 1.5vw), 1.35rem);
  font-weight: 600;
}

.network-merged-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.network-merged-stats .stat-row {
  display: flex;
  gap: 8px;
}

.network-merged-stats .stat-label {
  color: var(--text-muted);
}

.network-merged-stats .stat-value {
  font-weight: 500;
}

.metrics-tile-columns {
  gap: 32px;
}

.metrics-source-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.metrics-source-tiles .stat {
  flex: 1 1 auto;
  min-width: 100px;
}

[id$="-widget"]:has(.stats) {
  --widget-min-width: 280px;
}