/* ─────────────────────────────────────────────
 * i18n.css — RTL & language-aware layout layer
 *
 * Loaded after styles.css. Uses logical properties so most layout is
 * RTL-correct without per-language overrides. Use these utilities instead
 * of inline `style="..."` in HTML/JS so translations and direction can be
 * swapped without code changes.
 * ───────────────────────────────────────────── */

/* Direction-aware spacing — prefer these over margin-left/right.       */
.mi-start-1 { margin-inline-start: 4px; }
.mi-start-2 { margin-inline-start: 8px; }
.mi-start-3 { margin-inline-start: 12px; }
.mi-end-1   { margin-inline-end: 4px; }
.mi-end-2   { margin-inline-end: 8px; }
.mi-end-3   { margin-inline-end: 12px; }

.pi-start-1 { padding-inline-start: 4px; }
.pi-start-2 { padding-inline-start: 8px; }
.pi-end-1   { padding-inline-end: 4px; }
.pi-end-2   { padding-inline-end: 8px; }

/* Common one-off styles that were inline in the existing markup —
   replace `style="..."` with these classes as we wrap pages for i18n. */
.i18n-center      { text-align: center; }
.i18n-muted       { color: var(--text-3); }
.i18n-pad-32      { padding: 32px; }
.i18n-hidden      { display: none; }
.i18n-years       { margin-inline-start: 4px; font-size: 13px; color: var(--text-3); }

/* Language switcher (used in the landing nav). */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  margin-inline-end: 12px;
  background: transparent;
  border: 1px solid var(--border, rgba(255,255,255,0.15));
  border-radius: 6px;
  color: inherit;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.lang-switcher:hover {
  border-color: var(--text-2, rgba(255,255,255,0.4));
}
.lang-switcher select {
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  outline: none;
  cursor: pointer;
}

/* Rubric grounding paragraph (was inline-styled). */
.rubric-grounding {
  font-size: 11.5px;
  color: var(--text-3);
  margin-bottom: 12px;
  line-height: 1.55;
}
.rubric-grounding-label { color: var(--text-2); }

/* Interview-complete banner (was inline-styled). */
.interview-complete-wrap { padding: 16px; }
.interview-complete-msg {
  color: var(--s4);
  font-weight: 500;
  margin-bottom: 12px;
}

/* RTL flips that logical properties don't cover automatically. */
[dir="rtl"] .lpc-bar { flex-direction: row-reverse; }
[dir="rtl"] svg.flip-rtl { transform: scaleX(-1); }