/* A label with its value, the source word, the chevron and «المزيد», and the one table shape (FR-088); every value is a token. */
[data-part="kv"] {
  display: flex;
  align-items: center;
  gap: var(--spacing-row);
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: var(--spacing-row) var(--spacing-window);
  font-family: Almarai, sans-serif;
  font-size: var(--font-size-sm);
  background-color: var(--app-surface);
  color: var(--app-ink);
  border-bottom: 1px solid var(--app-line);
}

[data-part="kv"] [data-part="label"] {
  flex: 0 0 5.5rem;
  color: var(--app-ink-soft);
  font-weight: 700;
}

/* the value and the source word wrap as a pair: the word drops under a value that leaves it no room, never squeezed */
[data-part="kv"] [data-part="main"] {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: baseline;
  min-width: 0;
  gap: var(--spacing-xs) var(--spacing-row);
}

[data-part="kv"] [data-part="value"] {
  display: flex;
  flex: 0 1 auto;
  align-items: baseline;
  min-width: 0;
  max-width: 100%;
  gap: var(--spacing-sm);
}

[data-part="kv"] [data-part="text"] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}

[data-part="kv"] [data-part="value"][data-open="true"] {
  flex-wrap: wrap;
}

[data-part="kv"] [data-part="value"][data-open="true"] [data-part="text"] {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}

[data-part="kv"] [data-part="more"] {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--spacing-xs);
  border: 0;
  background-color: transparent;
  color: var(--app-btn);
  font-family: inherit;
  font-size: var(--font-size-meta);
  font-weight: 800;
  cursor: pointer;
}

[data-part="kv"] [data-part="source"] {
  flex: none;
  color: var(--app-muted);
  font-size: var(--font-size-meta);
  white-space: nowrap;
}

[data-part="kv"] [data-part="chevron"] {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--app-muted);
}

[data-part="kv"] [data-part="chevron"] svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

/* one table shape: the head told apart from the body, one border between rows */
[data-part="table"] {
  width: 100%;
  border-collapse: collapse;
  font-family: Almarai, sans-serif;
  font-size: var(--font-size-sm);
  background-color: var(--app-surface);
  color: var(--app-ink);
}

[data-part="table"] th,
[data-part="table"] td {
  padding: var(--spacing-sm) var(--spacing-row);
  border-bottom: 1px solid var(--app-line);
  text-align: start;
}

[data-part="table"] th {
  border-bottom-color: var(--app-line-strong);
  background-color: var(--app-raise);
  font-weight: 800;
}