/* Keep credential labels readable when Keybox cards have limited width. */
.keybox-entry {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.keybox-entry > details {
  width: 100%;
  min-width: 0;
}

.keybox-entry > details > summary {
  display: block;
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

.keybox-entry > .context-component-actions {
  width: 100%;
  min-width: 0;
  align-items: flex-start;
}

.keybox-entry > .context-component-actions > label {
  min-width: min(100%, 14rem);
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
}

.keybox-entry > .context-component-actions > label:has(input[type="radio"]),
.keybox-entry > .context-component-actions > label:has(input[type="checkbox"]) {
  flex: 1 1 14rem;
}

.keybox-entry > .context-component-actions > label input {
  flex: 0 0 auto;
}

.keybox-entry > .context-component-actions > button {
  flex: 0 0 auto;
}

@media (max-width: 600px) {
  .keybox-entry {
    padding: 0.75rem;
  }

  .keybox-entry > .context-component-actions {
    gap: 0.5rem;
  }

  .keybox-entry > .context-component-actions > label:has(input[type="radio"]),
  .keybox-entry > .context-component-actions > label:has(input[type="checkbox"]) {
    flex-basis: 100%;
  }
}

@media (max-width: 360px) {
  .keybox-entry > details > summary {
    overflow-wrap: anywhere;
  }
}