@media (min-width: 561px) {
  .order-grid {
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  }
}

.received-time {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}

.received-time small {
  color: #7b8da0;
  font-size: 10px;
}

.order-card.is-warning {
  border-color: #d69a35;
}

.order-card.is-warning > header {
  background: #fff8eb;
}

.order-card.is-warning .received-time {
  color: #98610d;
}

.order-card.is-late {
  border-color: #c43d2c;
}

.order-card.is-late > header {
  background: #fff0ed;
}

.order-card.is-late .received-time {
  color: #b33225;
  font-weight: 800;
}

@media (min-width: 641px) and (max-width: 1100px),
  (hover: none) and (pointer: coarse) and (min-width: 641px) and (max-width: 1366px) {
  body {
    font-size: 14px;
  }

  .topbar {
    min-height: 64px;
    padding: 8px 16px;
    gap: 12px;
  }

  main {
    padding: 16px;
  }

  .heading {
    margin-bottom: 16px;
  }

  .heading h1 {
    font-size: 28px;
  }

  .metrics article {
    min-width: 100px;
    padding: 10px 14px;
  }

  .lane {
    min-height: 280px;
    padding: 12px;
  }

  .order-card > header,
  .order-context {
    padding: 11px 12px;
  }

  .order-card ul {
    padding: 6px 12px;
  }

  .order-card li {
    padding: 6px 0;
  }

  .notes {
    margin: 6px 12px 10px;
  }

  .order-card button {
    min-height: 44px;
  }
}