/* Optional personal data: the same readable fields in the app and public demo. */
.sc-sage-theme fieldset[data-masterdata-group] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-column: 1 / -1;
  gap: 16px;
  width: 100%;
  max-width: 640px;
  min-width: 0;
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--sc-surface-line);
  border-radius: 8px;
}
.sc-sage-theme fieldset[data-masterdata-group] > legend {
  max-width: 100%;
  padding: 0 4px;
  overflow-wrap: anywhere;
}
.sc-sage-theme fieldset[data-masterdata-group] > p { margin: 0; line-height: 1.6; }
.sc-sage-theme fieldset[data-masterdata-group] > label {
  display: grid;
  align-content: start;
  gap: 6px;
  margin: 0;
  min-width: 0;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.sc-sage-theme fieldset[data-masterdata-group] :is(input, select) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--sc-surface-line);
  border-radius: 6px;
  background-color: var(--sc-surface-field);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.sc-sage-theme fieldset[data-masterdata-group] select { padding-right: 32px; }

/* Avoid nested card padding consuming the mobile demo editor's usable width. */
@media (max-width: 640px) {
  .hr-demo [data-parity-editor]:has([data-masterdata-section]) { padding: 14px 8px; }
  .hr-demo [data-masterdata-section] { padding: 16px 0; border: 0; border-radius: 0; }
  .hr-demo [data-masterdata-section] fieldset[data-masterdata-group] {
    padding: 12px 0;
    border: 0;
    border-radius: 0;
  }
  .hr-demo [data-masterdata-section] fieldset[data-masterdata-group] > legend { padding: 0; }
}