.material-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .85fr);
  gap: 24px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.material-card:first-child { border-top: 1px solid var(--line); }
.material-identity { display: grid; gap: 4px; min-width: 0; }
.material-identity b { font-size: 1.08rem; overflow-wrap: anywhere; }
.material-identity span {
  color: var(--muted);
  font: 400 .8rem Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}
.material-state {
  display: grid;
  grid-template-columns: minmax(130px, auto) 1fr auto;
  gap: 12px;
  align-items: center;
}
.material-badge {
  justify-self: start;
  padding: 5px 9px;
  background: var(--soft);
  font: 700 .72rem Arial, sans-serif;
  white-space: nowrap;
}
.material-badge-indexed { background: oklch(89% .05 78); color: oklch(34% .07 58); }
.material-badge-active { background: oklch(84% .075 145); color: oklch(29% .07 145); }
.material-badge-inactive { background: oklch(89% .018 70); color: oklch(38% .025 70); }
.material-description { margin: 0; color: var(--muted); font-size: .86rem; text-wrap: pretty; }
.material-state button { min-width: 104px; }
.material-state button:disabled { cursor: wait; opacity: .58; }
.material-error {
  grid-column: 1 / -1;
  min-height: 0;
  margin: 0;
  color: var(--accent);
  font-size: .82rem;
}
.material-error:empty { display: none; }
.material-empty { padding: 24px 0; color: var(--muted); }
@media (max-width: 700px) {
  .material-card { grid-template-columns: 1fr; gap: 12px; }
  .material-state { grid-template-columns: 1fr; }
  .material-state button { width: 100%; }
}