/**
 * FW2-A11Y-018 — RTL layout helpers.
 * Prefer logical properties so navigation/forms mirror under html[dir="rtl"].
 */

html[dir="rtl"] {
  direction: rtl;
}

html[dir="rtl"] label,
html[dir="rtl"] .hint,
html[dir="rtl"] .dim,
html[dir="rtl"] summary,
html[dir="rtl"] .setup-h {
  text-align: start;
}

html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] select,
html[dir="rtl"] textarea {
  text-align: start;
}

/* Sample preview inside the RTL panel */
.rtl-layout-preview {
  border-inline-start: 3px solid var(--line, #3a4654);
  padding-inline-start: 0.75rem;
}

.rtl-layout-sample-form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-inline-size: 22rem;
}

.rtl-layout-sample-label {
  text-align: start;
}

.rtl-layout-sample-input {
  inline-size: 100%;
  text-align: start;
}

.rtl-layout-sample-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.rtl-layout-sample-nav li {
  border: 1px solid var(--line, #3a4654);
  border-radius: 0.35rem;
  padding: 0.25rem 0.55rem;
}