.localization-demo {
  min-inline-size: 0;
}

.localization-demo > p {
  margin-block-start: 0;
}

.localization-demo__layout {
  display: grid;
  grid-template-columns: minmax(14rem, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: start;
  margin-block-start: 1.5rem;
}

.localization-simulator {
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 0.1rem solid var(--site-border);
  background: var(--site-surface-soft);
}

.localization-simulator h3,
.localization-simulator p,
.localization-simulator fieldset {
  margin-block-start: 0;
}

.localization-simulator__options {
  display: grid;
  gap: 0.8rem;
  padding: 0;
  border: 0;
}

.localization-simulator__options legend {
  margin-block-end: 0.75rem;
  font-weight: 820;
}

.localization-simulator__options label {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
  cursor: pointer;
}

.localization-simulator__options input {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  margin-block-start: 0.25rem;
  accent-color: var(--site-accent);
}

.localization-simulator__note,
.localization-form__required,
.field-hint {
  color: var(--site-muted);
  font-size: 0.9rem;
}

.localization-form {
  display: grid;
  gap: 1rem;
  min-inline-size: 0;
}

.localization-form__required,
.field-hint {
  margin: 0;
}

.localization-code {
  margin-block-start: 1.5rem;
  padding-block-start: 1rem;
  border-block-start: 0.1rem solid var(--site-border-soft);
}

.localization-code summary {
  inline-size: fit-content;
  cursor: pointer;
  font-weight: 820;
}

@media (max-width: 58rem) {
  .localization-demo__layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (forced-colors: active) {
  .localization-simulator {
    border-color: CanvasText;
  }
}