.mi .mi-received {
  display: grid;
  gap: var(--ds-s-6);
  color: var(--ds-ink);
  font-size: var(--ds-text-base);
}

.mi .mi-received-header {
  display: grid;
  gap: var(--ds-s-3);
}

.mi .mi-received-header h2 {
  margin: 0;
  color: var(--ds-ink);
  font-size: var(--ds-text-md);
  font-weight: var(--ds-w-semi);
}

.mi .mi-received-facts {
  border-bottom: 1px solid var(--ds-line);
}

.mi .mi-received-header-actions,
.mi .mi-received-match,
.mi .mi-received-line-actions,
.mi .mi-received-line-write {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ds-s-2);
}

.mi .mi-received-write {
  color: var(--ds-ink-2);
}

.mi .mi-received-lines {
  min-width: 0;
}

.mi .mi-received-lines h3 {
  margin: 0 0 var(--ds-s-2);
  color: var(--ds-ink-2);
  font-size: var(--ds-text-base);
  font-weight: var(--ds-w-medium);
}

.mi .mi-received-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.mi .mi-received-table th,
.mi .mi-received-table td {
  padding: var(--ds-s-3) var(--ds-s-2);
  border-bottom: 1px solid var(--ds-line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.mi .mi-received-table th {
  color: var(--ds-ink-3);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-w-medium);
}

.mi .mi-received-table th:first-child,
.mi .mi-received-table td:first-child {
  width: 45%;
}

.mi .mi-received-table td:not(:first-child) {
  color: var(--ds-ink-2);
  font-variant-numeric: tabular-nums;
}

.mi .mi-received-part-name {
  display: block;
  color: var(--ds-ink);
  font-weight: var(--ds-w-medium);
}

.mi .mi-received-part-no {
  display: block;
  margin-top: var(--ds-s-1);
  color: var(--ds-ink-2);
  font-size: var(--ds-text-sm);
}

.mi .mi-received-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-s-1);
  margin-top: var(--ds-s-1);
}

.mi .mi-received-line-actions {
  margin-top: var(--ds-s-1);
}

.mi .mi-received-price-editor {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: var(--ds-s-2);
}

.mi .mi-received-price-field {
  display: grid;
  gap: var(--ds-s-1);
  color: var(--ds-ink-2);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-w-medium);
}

.mi .mi-received-price-input {
  box-sizing: border-box;
  width: 100%;
  min-width: 120px;
  min-height: var(--ds-control-h);
  padding: 0 var(--ds-s-2);
  border: 1px solid var(--ds-field);
  border-radius: var(--ds-r-md);
  background: var(--ds-surface);
  color: var(--ds-ink);
  font: var(--ds-w-regular) var(--ds-text-base) / var(--ds-lh-base) var(--ds-font);
}

.mi .mi-received-price-input:focus-visible {
  outline: 2px solid var(--ds-focus);
  outline-offset: 2px;
}

.mi .mi-received-price-editor .mi-button {
  min-height: var(--ds-control-h);
}

.mi .mi-received-keyed {
  display: grid;
  gap: var(--ds-s-1);
  margin: var(--ds-s-2) 0 0;
  padding-left: var(--ds-s-4);
  color: var(--ds-ink-2);
  font-size: var(--ds-text-sm);
}

.mi .mi-received-keyed a {
  color: var(--ds-ink-2);
  text-decoration: underline;
  text-underline-offset: var(--ds-s-1);
}

.mi .mi-received-stale,
.mi .mi-received-error {
  margin: var(--ds-s-2) 0 0;
  color: var(--ds-st-late-ink);
  font-size: var(--ds-text-sm);
}

.mi .mi-received-error {
  color: var(--ds-st-late-ink);
}

@media (max-width: 759px) {
  .mi .mi-received {
    gap: var(--ds-s-4);
    font-size: var(--ds-text-p-body);
  }

  .mi .mi-received-header h2 {
    font-size: var(--ds-text-md);
  }

  .mi .mi-received-table,
  .mi .mi-received-table tbody {
    display: block;
    width: 100%;
  }

  .mi .mi-received-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .mi .mi-received-table tr {
    display: grid;
    gap: var(--ds-s-2);
    padding: var(--ds-s-3) 0;
    border-bottom: 1px solid var(--ds-line);
  }

  .mi .mi-received-table td,
  .mi .mi-received-table th:first-child,
  .mi .mi-received-table td:first-child {
    width: auto;
    padding: 0;
    border: 0;
  }

  .mi .mi-received-table td:not(:first-child) {
    display: flex;
    justify-content: space-between;
    gap: var(--ds-s-2);
    text-align: right;
  }

  .mi .mi-received-table td:not(:first-child)::before {
    content: attr(data-label);
    color: var(--ds-ink-2);
    font-size: var(--ds-text-p-meta);
    text-align: left;
  }

  .mi .mi-received-table td.mi-received-part {
    padding-bottom: var(--ds-s-2);
    border-bottom: 1px solid var(--ds-line);
  }

  .mi .mi-received-price-field {
    flex: 1 1 140px;
    font-size: var(--ds-text-p-meta);
  }

  .mi .mi-received-price-input {
    min-height: var(--ds-touch-h);
    font-size: var(--ds-text-p-body);
  }

  .mi .mi-received-price-editor .mi-button {
    min-height: var(--ds-touch-h);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mi .mi-received * {
    scroll-behavior: auto;
    transition-duration: 0ms;
  }
}