.header-actions {
  display: grid;
  gap: .45rem;
  justify-items: end;
}

.site-header .locale-switcher {
  gap: .25rem;
  font-size: .58rem;
}

.locale-switcher a {
  padding: .22rem .42rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgb(255 255 255 / 65%);
  line-height: 1;
}

.locale-switcher a:is(:hover, :focus-visible),
.locale-switcher a.active {
  color: white;
  border-color: rgb(255 255 255 / 30%);
  background: rgb(255 255 255 / 10%);
}

.translation-diff th,
.translation-diff td {
  min-width: 11rem;
  white-space: normal;
  vertical-align: top;
}

.translation-diff th:first-child {
  min-width: 8rem;
}

.translation-diff .proposed {
  color: #123f9c;
  background: #eef3ff;
  font-weight: 700;
}

@media (max-width: 800px) {
  .header-actions {
    min-width: 0;
  }

  .site-header .locale-switcher {
    justify-content: flex-end;
    font-size: .55rem;
  }
}

@media (max-width: 560px) {
  .header-actions {
    width: 100%;
    overflow: hidden;
    justify-items: stretch;
  }

  .header-actions > nav {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .header-actions > nav::-webkit-scrollbar {
    display: none;
  }

  .site-header .locale-switcher {
    justify-content: flex-start;
  }
}