/* Current-site fixes only: retain native cards, colors and component behavior. */
main > .mx-auto[class*="max-w-"] {
  width: 100%;
  min-width: 0;
}

main :is(.text-dark-500, .text-dark-600) {
  color: #9c9c9c;
}

[data-ko-category] {
  min-height: 44px;
  transform: none !important;
}

[data-ko-category] > span.truncate {
  min-width: 0;
  flex: 1;
  padding-inline-end: 12px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

[data-ko-category] > span.ml-auto {
  position: absolute;
  inset-inline-end: 6px;
  top: 5px;
  width: 12px;
  height: 12px;
}

@media (max-width: 639px) {
  main .profile-identity-grid .profile-role {
    position: relative !important;
    inset: auto !important;
    left: 50% !important;
    width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    transform: translateX(-50%) !important;
  }

  main .flex.items-start.justify-between.gap-4:has(h1) {
    flex-wrap: wrap;
    min-width: 0;
  }

  main .flex.items-start.justify-between.gap-4:has(h1) > div {
    min-width: 0;
    max-width: 100%;
  }

  main .flex.items-start.justify-between.gap-4:has(h1) > div:last-child {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  main .flex.items-start.justify-between.gap-4:has(h1) h1 {
    overflow-wrap: anywhere;
  }
}