/* Build 739: give every creation/edit section one deliberate, centered layout. */
html body .app-shell #memoryForm,
html body main.app-shell #memoryForm#memoryForm {
  --memory-form-content: 560px;
  --memory-form-focus: 380px;
  box-sizing: border-box !important;
}

html body .app-shell #memoryForm *,
html body main.app-shell #memoryForm#memoryForm * {
  box-sizing: border-box;
}

html body .app-shell #memoryForm .memory-flow-panel,
html body main.app-shell #memoryForm#memoryForm .memory-flow-panel {
  width: min(100%, var(--memory-form-content)) !important;
  min-width: 0 !important;
  margin: 16px auto 0 !important;
  padding: clamp(16px, 3vw, 22px) !important;
  gap: 16px !important;
  overflow: visible !important;
}

html body .app-shell #memoryForm .memory-flow-step,
html body main.app-shell #memoryForm#memoryForm .memory-flow-step {
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  text-align: center !important;
}

html body .app-shell #memoryForm :is(.memory-place-finder, .memory-place-autofill-fields, .memory-flow-story > label, .memory-media-dropzone, .memory-optional-fields),
html body main.app-shell #memoryForm#memoryForm :is(.memory-place-finder, .memory-place-autofill-fields, .memory-flow-story > label, .memory-media-dropzone, .memory-optional-fields) {
  width: 100% !important;
  min-width: 0 !important;
  margin-inline: auto !important;
}

html body .app-shell #memoryForm :is(label, input, select, textarea, button),
html body main.app-shell #memoryForm#memoryForm :is(label, input, select, textarea, button) {
  min-width: 0;
  max-width: 100%;
}

html body .app-shell #memoryForm :is(input, select, textarea),
html body main.app-shell #memoryForm#memoryForm :is(input, select, textarea) {
  width: 100% !important;
}

/* Address remains readable while its action stays aligned and reachable. */
html body .app-shell #memoryForm .memory-place-search-row,
html body main.app-shell #memoryForm#memoryForm .memory-place-search-row {
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
}

html body .app-shell #memoryForm .memory-place-search-button,
html body main.app-shell #memoryForm#memoryForm .memory-place-search-button {
  width: auto !important;
  min-width: 72px !important;
  justify-self: end !important;
}

html body .app-shell #memoryForm .memory-location-hint,
html body main.app-shell #memoryForm#memoryForm .memory-location-hint {
  display: block !important;
  max-width: 44ch !important;
  margin: 2px auto 0 !important;
  text-align: center !important;
  line-height: 1.4 !important;
}

/* Date is a single centered decision; the legacy people select is hidden. */
html body .app-shell #memoryForm .memory-date-row,
html body main.app-shell #memoryForm#memoryForm .memory-date-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: min(100%, var(--memory-form-focus)) !important;
  margin: 2px auto 0 !important;
}

html body .app-shell #memoryForm .memory-date-row > label:not(.memory-people-select),
html body main.app-shell #memoryForm#memoryForm .memory-date-row > label:not(.memory-people-select) {
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
}

html body .app-shell #memoryForm #memoryDate,
html body main.app-shell #memoryForm#memoryForm #memoryDate {
  text-align: center !important;
  text-align-last: center !important;
}

/* Companion choices form one balanced module, never a clipped loose row. */
html body .app-shell #memoryForm .memory-people-chips,
html body main.app-shell #memoryForm#memoryForm .memory-people-chips {
  width: min(100%, 500px) !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 16px !important;
  justify-items: stretch !important;
}

html body .app-shell #memoryForm .memory-people-chips > span,
html body main.app-shell #memoryForm#memoryForm .memory-people-chips > span {
  width: 100% !important;
  text-align: center !important;
}

html body .app-shell #memoryForm .memory-people-chips > div,
html body main.app-shell #memoryForm#memoryForm .memory-people-chips > div {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 9px !important;
}

html body .app-shell #memoryForm .memory-people-chips button,
html body main.app-shell #memoryForm#memoryForm .memory-people-chips button {
  width: 100% !important;
  min-width: 0 !important;
  padding-inline: 8px !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
}

html body .app-shell #memoryForm .location-confidence,
html body main.app-shell #memoryForm#memoryForm .location-confidence {
  width: min(100%, 460px) !important;
  margin-inline: auto !important;
}

/* Narrative fields stay easy to scan; supporting actions are centered. */
html body .app-shell #memoryForm .memory-flow-story,
html body main.app-shell #memoryForm#memoryForm .memory-flow-story {
  align-items: stretch !important;
}

html body .app-shell #memoryForm .favorite-toggle,
html body main.app-shell #memoryForm#memoryForm .favorite-toggle {
  display: grid !important;
  grid-template-columns: 20px auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(100%, var(--memory-form-focus)) !important;
  margin-inline: auto !important;
  padding: 13px 18px !important;
  gap: 11px !important;
  text-align: left !important;
  cursor: pointer !important;
}

html body .app-shell #memoryForm .favorite-toggle input[type="checkbox"],
html body main.app-shell #memoryForm#memoryForm .favorite-toggle input[type="checkbox"] {
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .app-shell #memoryForm .favorite-toggle > span,
html body main.app-shell #memoryForm#memoryForm .favorite-toggle > span {
  width: auto !important;
  min-width: 0 !important;
  text-align: left !important;
}

html body .app-shell #memoryForm .memory-flow-feeling > *,
html body main.app-shell #memoryForm#memoryForm .memory-flow-feeling > *,
html body .app-shell #memoryForm .memory-flow-media > *,
html body main.app-shell #memoryForm#memoryForm .memory-flow-media > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

html body .app-shell #memoryForm .memory-flow-feeling .category-swatch-row,
html body main.app-shell #memoryForm#memoryForm .memory-flow-feeling .category-swatch-row {
  display: grid !important;
  width: 100% !important;
  margin-inline: auto !important;
  justify-items: center !important;
  text-align: center !important;
}

html body .app-shell #memoryForm .memory-flow-feeling :is(.memory-flow-substep, .editor-subheading),
html body main.app-shell #memoryForm#memoryForm .memory-flow-feeling :is(.memory-flow-substep, .editor-subheading) {
  width: min(100%, 420px) !important;
  margin-inline: auto !important;
  justify-items: center !important;
  text-align: center !important;
}

html body .app-shell #memoryForm .memory-flow-feeling .editor-subheading > :is(span, small),
html body main.app-shell #memoryForm#memoryForm .memory-flow-feeling .editor-subheading > :is(span, small) {
  display: block !important;
  width: 100% !important;
  margin-inline: auto !important;
  text-align: center !important;
  text-wrap: balance !important;
}

html body .app-shell #memoryForm .memory-flow-feeling .memory-pin-preview-card,
html body main.app-shell #memoryForm#memoryForm .memory-flow-feeling .memory-pin-preview-card {
  grid-template-columns: minmax(0, 1fr) !important;
  width: min(100%, var(--memory-form-focus)) !important;
  margin: 4px auto 12px !important;
  padding: 15px 18px !important;
  gap: 8px !important;
  justify-items: center !important;
  text-align: center !important;
}

html body .app-shell #memoryForm .memory-flow-feeling .memory-pin-preview-copy,
html body main.app-shell #memoryForm#memoryForm .memory-flow-feeling .memory-pin-preview-copy {
  width: 100% !important;
  justify-items: center !important;
  text-align: center !important;
}

html body .app-shell #memoryForm .memory-flow-feeling .memory-pin-preview-copy :is(strong, small),
html body main.app-shell #memoryForm#memoryForm .memory-flow-feeling .memory-pin-preview-copy :is(strong, small) {
  width: 100% !important;
  text-align: center !important;
}

html body .app-shell #memoryForm .memory-flow-feeling .category-swatch-rail,
html body main.app-shell #memoryForm#memoryForm .memory-flow-feeling .category-swatch-rail {
  width: min(100%, 500px) !important;
  margin-inline: auto !important;
}

html body .app-shell #memoryForm .memory-flow-media .memory-media-dropzone-copy,
html body main.app-shell #memoryForm#memoryForm .memory-flow-media .memory-media-dropzone-copy {
  max-width: 420px !important;
  margin-inline: auto !important;
  text-align: center !important;
}

@media (max-width: 560px) {
  html body .app-shell #memoryForm,
  html body main.app-shell #memoryForm#memoryForm {
    --memory-form-focus: 100%;
  }

  html body .app-shell #memoryForm .memory-flow-panel,
  html body main.app-shell #memoryForm#memoryForm .memory-flow-panel {
    padding: 15px !important;
    border-radius: 22px !important;
  }

  html body .app-shell #memoryForm .two-col:not(.memory-date-row),
  html body main.app-shell #memoryForm#memoryForm .two-col:not(.memory-date-row) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body .app-shell #memoryForm .memory-people-chips,
  html body main.app-shell #memoryForm#memoryForm .memory-people-chips {
    padding: 14px !important;
  }

  html body .app-shell #memoryForm .memory-people-chips > div,
  html body main.app-shell #memoryForm#memoryForm .memory-people-chips > div {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 370px) {
  html body .app-shell #memoryForm .memory-place-search-row,
  html body main.app-shell #memoryForm#memoryForm .memory-place-search-row {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  html body .app-shell #memoryForm .memory-place-search-button,
  html body main.app-shell #memoryForm#memoryForm .memory-place-search-button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    justify-self: stretch !important;
  }
}