/* content-translations.css
 * Per-locale authoring chrome woven into each translatable field on the
 * admin edit page (dynamic-content i18n, Path 3 / architecture.md §26.10).
 * Emitted by TranslationFieldDecorator, toggled by the `locale-tab`
 * data-ui handler. Pane visibility is driven by the shared `.invisible`
 * utility; this file is layout + affordance only.
 *
 * The `Fr · En · It · De` tab strip itself is NOT styled here — it reuses
 * the locale-switcher component verbatim (`.locale-switcher` /
 * `.locale-switcher__option` / `.locale-switcher__sep` in
 * `locale-switcher.css`, `--field` modifier). This file only styles the
 * reference + per-locale-pane bits that are unique to the editor.
 */

/* The left-column `title_html` field has no `.block-header` to host the tab
   strip. Pin it to the top-right of the field — level with the field label —
   instead of stacking it on its own row above the input. (`.block`-shaped
   fields keep their strip inside `.block-actions`; only the non-`.block`
   left-column wrapper carries `.locale-tabs-row`.) */
.translatable-field:not(.block) {
	position: relative;
}

.locale-tabs-row {
	position: absolute;
	top: 0;
	right: 0;
}

/* In a `.block`-shaped field the tab strip shares `.block-actions` with
   the B/I/U toolbar / action buttons. `.block-actions` centres its items;
   bottom-align the strip instead so it sits on the same baseline as the
   buttons and the block label. */
.block-actions .locale-switcher--field {
	align-self: flex-end;
}

/* French reference shown above a non-default-locale editor for comparison. */
.translation-reference {
	margin: 0.35rem 0;
	padding: 0.4rem 0.6rem;
	border-left: 3px solid var(--brand-ink, #222);
	background: rgba(0, 0, 0, 0.04);
	font-size: 0.92em;
}

.translation-reference__tag {
	display: inline-block;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	opacity: 0.55;
	margin-bottom: 0.2rem;
}

.translation-reference__value {
	opacity: 0.8;
}

/* Per-locale `<input>` panes (title / keyword / reference fields). The
   richtext panes reuse the existing `.richtext` styling as-is. */
.translation-pane {
	display: block;
}

.translation-input {
	width: 100%;
}