/* Readable QC result cards with the score breakdown visible to assignees. */
#drawer-overlay .quality-history {
  gap: 12px !important;
}

#drawer-overlay .quality-history article {
  grid-template-columns: 72px minmax(0, 1fr) !important;
  gap: 14px !important;
  padding: 16px !important;
  align-items: start !important;
}

#drawer-overlay .quality-history article > span {
  min-width: 0 !important;
  gap: 6px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

#drawer-overlay .quality-history .quality-total-score {
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

#drawer-overlay .quality-history .quality-total-score small {
  font-size: 12px !important;
}

#drawer-overlay .quality-history article > span > b {
  font-size: 15px !important;
  line-height: 1.35 !important;
}

#drawer-overlay .quality-history article > span > small {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

#drawer-overlay .quality-score-breakdown {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 8px !important;
}

#drawer-overlay .quality-score-breakdown > span {
  display: flex !important;
  min-width: 0 !important;
  min-height: 62px !important;
  padding: 8px 7px !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 5px !important;
  border: 1px solid #dfe5df !important;
  border-radius: 8px !important;
  background: #fff !important;
}

#drawer-overlay .quality-score-breakdown small {
  color: #656d66 !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: manual !important;
}

#drawer-overlay .quality-score-breakdown b {
  color: #2f6548 !important;
  font-size: 16px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

#drawer-overlay .quality-history article.revision .quality-score-breakdown b {
  color: #a44f3c !important;
}

#drawer-overlay .quality-history article > span > p {
  margin: 8px 0 0 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

@media (max-width: 700px) {
  #drawer-overlay .quality-history article {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 11px !important;
    padding: 13px !important;
  }

  #drawer-overlay .quality-history .quality-total-score {
    font-size: 24px !important;
  }

  #drawer-overlay .quality-score-breakdown {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  #drawer-overlay .quality-score-breakdown > span {
    min-height: 58px !important;
  }
}