/* One quiet home for playable audio and song keepsakes. Scoped to the editor. */
html body main.app-shell section.map-stage #memoryForm#memoryForm .memory-sound-capture {
  color: var(--mymappi-text-primary) !important;
  background: var(--mymappi-surface-canvas) !important;
  border-color: var(--mymappi-keyline) !important;
  container-type: inline-size;
  scroll-margin-block-start: 10rem;
}

html body main.app-shell section.map-stage #memoryForm#memoryForm .memory-sound-capture :is(p, small, label, .field-hint) {
  text-align: left !important;
  overflow-wrap: anywhere;
  color: var(--mymappi-text-muted) !important;
  font-size: .875rem !important;
  line-height: 1.5 !important;
  max-width: 100%;
}

html body main.app-shell section.map-stage #memoryForm#memoryForm .memory-sound-capture :is(.memory-sound-intro, .memory-sound-help, .memory-sound-file-hint, .memory-sound-capture-status) {
  margin-block: .6rem !important;
}

html body main.app-shell section.map-stage #memoryForm#memoryForm .memory-sound-capture-heading strong {
  font-size: 1rem !important;
}

html body main.app-shell section.map-stage #memoryForm#memoryForm .memory-sound-capture-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .625rem !important;
}

html body main.app-shell section.map-stage #memoryForm#memoryForm .memory-sound-capture :is(#memoryVoiceRecordButton, #memoryVoicePickButton, #memoryVoiceStopButton, #memoryVoiceUseButton, #memoryVoiceDiscardButton, #memoryVoiceRemoveButton, summary) {
  min-height: 44px !important;
  height: auto !important;
  white-space: normal !important;
  font-size: .9375rem !important;
  line-height: 1.35 !important;
  touch-action: manipulation;
}

html body main.app-shell section.map-stage #memoryForm#memoryForm .memory-sound-capture :is(#memoryVoiceRecordButton, #memoryVoicePickButton, #memoryVoiceStopButton, #memoryVoiceUseButton, #memoryVoiceDiscardButton, #memoryVoiceRemoveButton) {
  padding: .75rem !important;
  color: var(--mymappi-text-primary) !important;
  border: 1px solid var(--mymappi-keyline) !important;
  background: var(--mymappi-surface-card) !important;
  box-shadow: none !important;
  border-radius: 14px !important;
}

html body main.app-shell section.map-stage #memoryForm#memoryForm .memory-sound-capture :is(#memoryVoiceRecordButton, #memoryVoiceUseButton, #memoryVoiceStopButton) {
  color: var(--mymappi-action-primary-ink) !important;
  background: var(--mymappi-color-midnight) !important;
}

html body main.app-shell section.map-stage #memoryForm#memoryForm .memory-sound-capture button:disabled {
  opacity: .55;
  cursor: default;
}

html body main.app-shell section.map-stage #memoryForm#memoryForm .memory-sound-capture :is(button, summary, input, audio):focus-visible {
  outline: 3px solid var(--mymappi-color-midnight) !important;
  outline-offset: 3px;
}

html body main.app-shell section.map-stage #memoryForm#memoryForm .memory-sound-capture :is(.memory-voice-preview, .memory-voice-attached):not([hidden]) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: .75rem !important;
  padding: .875rem !important;
  background: var(--mymappi-surface-card) !important;
  border-color: var(--mymappi-keyline) !important;
  color: var(--mymappi-text-primary) !important;
}

html body main.app-shell section.map-stage #memoryForm#memoryForm .memory-sound-capture .memory-voice-attached > span {
  color: var(--mymappi-text-primary) !important;
  font-size: .9375rem !important;
}

html body main.app-shell section.map-stage #memoryForm#memoryForm .memory-sound-capture audio {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  color-scheme: light;
}

html body main.app-shell section.map-stage #memoryForm#memoryForm .memory-sound-file-hint svg { color: var(--mymappi-text-primary) !important; }

html body main.app-shell section.map-stage #memoryForm#memoryForm .memory-voice-preview > div {
  display: flex !important;
  flex-wrap: wrap;
  gap: .5rem;
}

html body main.app-shell section.map-stage #memoryForm#memoryForm .memory-voice-preview > div > button { flex: 1 1 8rem; }

html body main.app-shell section.map-stage #memoryForm#memoryForm .memory-voice-recording:not([hidden]) {
  display: grid !important;
  grid-template-columns: 10px auto minmax(0, 1fr) !important;
  color: var(--mymappi-text-primary) !important;
  background: var(--mymappi-surface-card) !important;
}

html body main.app-shell section.map-stage #memoryForm#memoryForm #memoryVoiceStopButton { grid-column: 1 / -1; }

html body main.app-shell section.map-stage #memoryForm#memoryForm .memory-sound-capture :is(.memory-sound-song, .memory-sound-direct) {
  border-top: 1px solid var(--mymappi-keyline);
  padding-block: .5rem;
}

html body main.app-shell section.map-stage #memoryForm#memoryForm .memory-sound-capture :is(.memory-sound-song, .memory-sound-direct) > summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  justify-content: space-between;
  color: var(--mymappi-text-primary) !important;
  cursor: pointer;
  list-style: none;
}

html body main.app-shell section.map-stage #memoryForm#memoryForm .memory-sound-capture details > summary::-webkit-details-marker { display: none; }
html body main.app-shell section.map-stage #memoryForm#memoryForm .memory-sound-capture details > summary::after { content: "+"; }
html body main.app-shell section.map-stage #memoryForm#memoryForm .memory-sound-capture details[open] > summary::after { content: "−"; }

html body main.app-shell section.map-stage #memoryForm#memoryForm .memory-sound-capture :is(.memory-song-field, .memory-sound-link-field) {
  display: grid !important;
  gap: .5rem;
  margin: .5rem 0 !important;
}

html body main.app-shell section.map-stage #memoryForm#memoryForm .memory-sound-capture input:not([type="file"]) {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  font-size: 1rem !important;
  color: var(--mymappi-text-primary) !important;
  background: var(--mymappi-surface-card) !important;
}

@container (max-width: 26rem) {
  html body main.app-shell section.map-stage #memoryForm#memoryForm .memory-sound-capture-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Capsule: one heading and a full-width player. Sound removal lives in Edit.
   Let longer song details and larger text grow; do not clip or cap the card. */
html body main.app-shell #memoryBottomSheet .full-memory-capsule .memory-capsule-soundscape {
  min-width: 0 !important;
  gap: .75rem !important;
  padding: 1rem !important;
}

html body main.app-shell #memoryBottomSheet .full-memory-capsule .memory-capsule-soundscape > header {
  grid-template-columns: 2rem minmax(0, 1fr) !important;
  gap: .625rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body main.app-shell #memoryBottomSheet .full-memory-capsule .memory-capsule-soundscape > header > :is(svg, [data-lucide]) {
  width: 2rem !important;
  height: 2rem !important;
  padding: .375rem !important;
  color: var(--mymappi-color-midnight) !important;
  background: var(--mymappi-surface-mint, #e4f5f1) !important;
}

html body main.app-shell #memoryBottomSheet .full-memory-capsule .memory-capsule-soundscape header strong {
  font-size: .9375rem !important;
  line-height: 1.4 !important;
  overflow-wrap: anywhere;
}

html body main.app-shell #memoryBottomSheet .full-memory-capsule .memory-capsule-soundscape .memory-capsule-voice-row {
  grid-template-columns: minmax(0, 1fr) !important;
  min-width: 0 !important;
  gap: .5rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

html body main.app-shell #memoryBottomSheet .full-memory-capsule .memory-capsule-soundscape audio {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  height: 44px !important;
}

html body main.app-shell #memoryBottomSheet .full-memory-capsule .memory-capsule-soundscape :is(.memory-capsule-audio-start, .memory-capsule-song a) {
  min-height: 44px !important;
  white-space: normal !important;
}

html body main.app-shell #memoryBottomSheet .full-memory-capsule .memory-capsule-soundscape .memory-capsule-song > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

html body main.app-shell #memoryBottomSheet .full-memory-capsule .memory-capsule-soundscape .memory-capsule-song a {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  color: inherit;
  text-decoration: underline;
}

html body main.app-shell #memoryBottomSheet .full-memory-capsule .memory-capsule-soundscape :is(audio, button, a):focus-visible {
  outline: 3px solid var(--mymappi-color-mint, #75d9c3);
  outline-offset: 3px;
}

html body main.app-shell #memoryBottomSheet .full-memory-capsule .memory-audio-export:not([hidden]) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  justify-self: start;
  gap: .5rem;
  min-height: 44px;
  max-width: 100%;
  width: fit-content;
  padding: .4rem .5rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: #d3e5ed;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: normal;
  text-align: start;
  overflow-wrap: anywhere;
}
/* Override the capsule's shared icon sizing without changing its player icons. */
html body main.app-shell #memoryBottomSheet .full-memory-capsule .memory-audio-export svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  flex-shrink: 0;
  color: #a7d5d0;
}
@media (hover: hover) {
  html body main.app-shell #memoryBottomSheet .full-memory-capsule .memory-audio-export:not(:disabled):hover {
    background: rgba(117, 217, 195, .08);
    color: #f4fffc;
    text-decoration: underline;
    text-underline-offset: .2em;
  }
}
html body main.app-shell #memoryBottomSheet .full-memory-capsule .memory-audio-export:not(:disabled):active { background: rgba(117, 217, 195, .12); }
html body main.app-shell #memoryBottomSheet .full-memory-capsule .memory-audio-export:disabled { cursor: wait; }
html body main.app-shell #memoryBottomSheet .full-memory-capsule [data-memory-audio-export-status] { color: #d3e5ed; line-height: 1.5; overflow-wrap: anywhere; }
html body main.app-shell #memoryBottomSheet .full-memory-capsule [data-memory-audio-export-status]:empty { display: none; }