/* Direction is selected server-side before paint, preventing layout flips. */
html[dir="rtl"] body {
  direction: rtl;
  text-align: start;
}
html[dir="rtl"] .lucide-arrow-right,
html[dir="rtl"] .lucide-chevron-right,
html[dir="rtl"] .lucide-arrow-left,
html[dir="rtl"] .lucide-chevron-left {
  transform: scaleX(-1);
}
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] code,
html[dir="rtl"] pre,
[dir="ltr"] {
  direction: ltr;
  text-align: left;
}
[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

.post-translation-control {
  display: flex;
  padding: 0 var(--space-4) var(--space-2);
}
.post-translate-button {
  min-height: var(--touch-size);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 .1rem;
  border: 0;
  border-radius: .35rem;
  background: transparent;
  color: var(--color-primary);
  font-weight: 700;
  font-size: .87rem;
  text-align: start;
  cursor: pointer;
}
.post-translate-button:hover {
  text-decoration: underline;
}
.post-translation {
  margin: 0 var(--space-4) var(--space-3);
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--color-border);
}
.post-translation small {
  display: block;
  color: var(--color-muted);
  margin-bottom: var(--space-2);
  font-size: .75rem;
}
.post-translation h3 {
  margin: 0 0 var(--space-2);
  font-size: 1rem;
}
.post-translation p {
  margin: 0;
  white-space: pre-line;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
@media (min-width: 720px) {
  .post-translation-control { padding-inline: var(--space-5); }
  .post-translation { margin-inline: var(--space-5); }
}