.admin-metrics {
  display: flex;
  flex-wrap: wrap;
  max-width: calc(var(--metric-count) * 218px);
  margin: 0 0 16px;
  border: 1px solid #e1e7ef;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(22 37 63 / 4%);
  overflow: hidden;
}

.admin-metric-card {
  --metric-value: #172740;
  position: relative;
  display: grid;
  flex: 1 1 124px;
  grid-template-rows: auto auto;
  align-content: center;
  align-items: start;
  row-gap: 4px;
  min-width: 0;
  min-height: 76px;
  padding: 12px clamp(12px, 1.25vw, 22px);
  border: 0;
  border-radius: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  overflow-wrap: anywhere;
}

.admin-metric-card + .admin-metric-card::before {
  position: absolute;
  inset: 15px auto 15px 0;
  width: 1px;
  background: #e7ecf3;
  content: "";
}

.admin-metrics:has(.admin-metric-detail) .admin-metric-card {
  min-height: 94px;
  grid-template-rows: 17px 30px minmax(14px, auto);
}

.admin-metric-label { color: #526179; font-size: 12px; font-weight: 650; line-height: 17px; }
.admin-metric-value { color: var(--metric-value); font-size: 26px; font-weight: 700; line-height: 30px; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.admin-metric-detail { color: #65748a; font-size: 11px; line-height: 14px; }
.admin-metric-card[data-tone="positive"] { --metric-value: #267554; }
.admin-metric-card[data-tone="attention"] { --metric-value: #945118; }
.admin-metric-card[data-tone="danger"] { --metric-value: #ab3c51; }
.admin-metric-card[data-tone="accent"] { --metric-value: #2458bc; }

button.admin-metric-card { cursor: pointer; }
button.admin-metric-card::after {
  position: absolute;
  top: 19px;
  right: 15px;
  width: 6px;
  height: 6px;
  border: solid #6c7f9c;
  border-width: 1.5px 1.5px 0 0;
  transform: rotate(45deg);
  content: "";
}
button.admin-metric-card .admin-metric-label { padding-right: 12px; }
button.admin-metric-card:hover { background: #f5f8fd; }
button.admin-metric-card:focus-visible { outline: 2px solid #246bff; outline-offset: -3px; }

.dm-list > .admin-metrics { margin-bottom: 0; }