/* MyMappi Capture v2: one calm palette, with feeling color kept in context. */

html body .app-shell .memory-editor,
html body main.app-shell .memory-editor {
  --capture-ivory: #fffdf8;
  --capture-ivory-soft: #f5fbf7;
  --capture-navy: #073f52;
  --capture-teal: #14977f;
  --capture-teal-deep: #0f7f84;
  --capture-coral: #f36b63;
  color: var(--capture-navy) !important;
  border-color: rgba(17, 126, 121, 0.14) !important;
  background:
    radial-gradient(circle at 88% 0%, rgba(20, 151, 127, 0.07), transparent 34%),
    linear-gradient(180deg, var(--capture-ivory) 0%, var(--capture-ivory-soft) 100%) !important;
  box-shadow:
    0 28px 72px rgba(3, 42, 53, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

html body .app-shell .memory-editor::before,
html body main.app-shell .memory-editor::before {
  background: rgba(7, 63, 82, 0.16) !important;
}

html body .app-shell .memory-editor .editor-header,
html body main.app-shell .memory-editor .editor-header {
  border-bottom-color: rgba(7, 63, 82, 0.08) !important;
}

html body .app-shell .memory-editor .editor-header p,
html body main.app-shell .memory-editor .editor-header p {
  border: 1px solid rgba(243, 107, 99, 0.16) !important;
  color: #bd4e4a !important;
  background: rgba(243, 107, 99, 0.105) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}

html body .app-shell .memory-editor .editor-header h2,
html body main.app-shell .memory-editor .editor-header h2 {
  color: var(--capture-navy) !important;
}

html body .app-shell .memory-editor .editor-promise,
html body main.app-shell .memory-editor .editor-promise {
  color: rgba(7, 63, 82, 0.62) !important;
}

html body .app-shell .memory-editor .editor-header .icon-button,
html body main.app-shell .memory-editor .editor-header .icon-button {
  border-color: rgba(7, 63, 82, 0.09) !important;
  color: var(--capture-navy) !important;
  background: rgba(255, 255, 255, 0.7) !important;
}

/* Place, Story, and Media stay neutral instead of changing with Feeling. */
html body .app-shell .memory-editor .memory-flow-panel:not(.memory-flow-feeling),
html body main.app-shell .memory-editor .memory-flow-panel:not(.memory-flow-feeling) {
  border-color: rgba(15, 127, 132, 0.105) !important;
  background:
    radial-gradient(circle at 7% 0%, rgba(20, 151, 127, 0.055), transparent 38%),
    rgba(255, 255, 255, 0.76) !important;
  box-shadow:
    0 14px 32px rgba(7, 63, 82, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

html body .app-shell .memory-editor .memory-flow-place::after,
html body .app-shell .memory-editor .memory-flow-story::after,
html body main.app-shell .memory-editor .memory-flow-place::after,
html body main.app-shell .memory-editor .memory-flow-story::after {
  background: rgba(20, 151, 127, 0.2) !important;
}

/* The chosen feeling is meaningful here, so this is its only form-level tint. */
html body .app-shell .memory-editor .memory-flow-feeling,
html body main.app-shell .memory-editor .memory-flow-feeling {
  border-color: color-mix(in srgb, var(--editor-accent, var(--capture-teal)) 25%, rgba(7, 63, 82, 0.09)) !important;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--editor-accent, var(--capture-teal)) 12%, transparent), transparent 42%),
    rgba(255, 255, 255, 0.8) !important;
}

html body .app-shell .memory-editor .memory-flow-step,
html body main.app-shell .memory-editor .memory-flow-step {
  border-color: rgba(20, 151, 127, 0.12) !important;
  color: #0d766d !important;
  background: rgba(20, 151, 127, 0.085) !important;
}

html body .app-shell .memory-editor .memory-flow-feeling .memory-flow-step,
html body main.app-shell .memory-editor .memory-flow-feeling .memory-flow-step {
  border-color: color-mix(in srgb, var(--editor-accent, var(--capture-teal)) 18%, rgba(7, 63, 82, 0.08)) !important;
  color: color-mix(in srgb, var(--editor-accent, var(--capture-teal)) 68%, var(--capture-navy)) !important;
  background: color-mix(in srgb, var(--editor-accent, var(--capture-teal)) 10%, rgba(255, 255, 255, 0.9)) !important;
}

html body .app-shell .memory-editor label,
html body main.app-shell .memory-editor label,
html body .app-shell .memory-editor .editor-subheading span,
html body main.app-shell .memory-editor .editor-subheading span {
  color: rgba(7, 63, 82, 0.78) !important;
}

html body .app-shell .memory-editor input,
html body .app-shell .memory-editor select,
html body .app-shell .memory-editor textarea,
html body main.app-shell .memory-editor input,
html body main.app-shell .memory-editor select,
html body main.app-shell .memory-editor textarea {
  border-color: rgba(7, 63, 82, 0.105) !important;
  color: var(--capture-navy) !important;
  background: rgba(255, 255, 255, 0.84) !important;
}

html body .app-shell .memory-editor input:not(#memoryLocation):focus,
html body .app-shell .memory-editor select:focus,
html body .app-shell .memory-editor textarea:focus,
html body main.app-shell .memory-editor input:not(#memoryLocation):focus,
html body main.app-shell .memory-editor select:focus,
html body main.app-shell .memory-editor textarea:focus {
  border-color: rgba(20, 151, 127, 0.62) !important;
  box-shadow: 0 0 0 3px rgba(20, 151, 127, 0.12) !important;
}

html body .app-shell .memory-editor .memory-place-search-row:focus-within,
html body main.app-shell .memory-editor .memory-place-search-row:focus-within {
  border-color: rgba(20, 151, 127, 0.5) !important;
  box-shadow:
    0 12px 28px rgba(7, 63, 82, 0.07),
    0 0 0 3px rgba(20, 151, 127, 0.11) !important;
}

html body .app-shell .memory-editor .memory-place-search-button,
html body main.app-shell .memory-editor .memory-place-search-button,
html body .app-shell .memory-editor .location-confidence > span,
html body main.app-shell .memory-editor .location-confidence > span,
html body .app-shell .memory-editor .memory-media-dropzone-copy > span[data-icon],
html body main.app-shell .memory-editor .memory-media-dropzone-copy > span[data-icon] {
  background: linear-gradient(140deg, var(--capture-teal), var(--capture-teal-deep)) !important;
}

html body .app-shell .memory-editor .memory-media-dropzone,
html body main.app-shell .memory-editor .memory-media-dropzone {
  border-color: rgba(20, 151, 127, 0.24) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(20, 151, 127, 0.07), transparent 40%),
    rgba(255, 255, 255, 0.7) !important;
}

html body .app-shell .memory-editor .memory-media-dropzone:focus-visible,
html body .app-shell .memory-editor .memory-media-dropzone.is-dragging,
html body main.app-shell .memory-editor .memory-media-dropzone:focus-visible,
html body main.app-shell .memory-editor .memory-media-dropzone.is-dragging {
  border-color: rgba(20, 151, 127, 0.64) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(20, 151, 127, 0.12), transparent 42%),
    rgba(248, 255, 252, 0.88) !important;
  box-shadow:
    0 14px 30px rgba(7, 63, 82, 0.07),
    0 0 0 3px rgba(20, 151, 127, 0.1) !important;
}

html body .app-shell .memory-editor .memory-media-dropzone.is-dragging .memory-media-dropzone-copy strong,
html body main.app-shell .memory-editor .memory-media-dropzone.is-dragging .memory-media-dropzone-copy strong {
  color: #0d766d !important;
}

html body .app-shell .memory-editor .memory-people-chips button.active,
html body main.app-shell .memory-editor .memory-people-chips button.active {
  color: #ffffff !important;
  background: linear-gradient(140deg, var(--capture-teal), var(--capture-teal-deep)) !important;
  box-shadow: 0 10px 20px rgba(15, 127, 132, 0.18) !important;
}

html body .app-shell .memory-editor .editor-actions,
html body main.app-shell .memory-editor .editor-actions {
  border-top-color: rgba(7, 63, 82, 0.08) !important;
  background: linear-gradient(180deg, rgba(255, 253, 248, 0), rgba(255, 253, 248, 0.94)) !important;
}

html body .app-shell .memory-editor .editor-actions .primary-button,
html body main.app-shell .memory-editor .editor-actions .primary-button {
  border-color: rgba(218, 255, 246, 0.3) !important;
  background:
    radial-gradient(circle at 32% 18%, rgba(255, 255, 255, 0.32), transparent 31%),
    linear-gradient(140deg, #18a47f 0%, #118f91 58%, #0e7284 100%) !important;
  box-shadow:
    0 15px 30px rgba(15, 127, 132, 0.24),
    0 0 0 4px rgba(20, 151, 127, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

html body .app-shell .memory-editor .memory-editor-progress,
html body main.app-shell .memory-editor .memory-editor-progress {
  border-color: rgba(7, 63, 82, 0.075) !important;
  background: rgba(255, 255, 255, 0.5) !important;
}

html body .app-shell .memory-editor .memory-editor-progress span.active,
html body main.app-shell .memory-editor .memory-editor-progress span.active {
  color: #0d766d !important;
  background: rgba(20, 151, 127, 0.095) !important;
  box-shadow: inset 0 0 0 1px rgba(20, 151, 127, 0.08) !important;
}

html body .app-shell .memory-editor .memory-editor-progress i,
html body main.app-shell .memory-editor .memory-editor-progress i {
  background: rgba(15, 127, 132, 0.16) !important;
}

@media (max-width: 720px) {
  /* A compact live tracker replaces five crowded labels on phones. */
  html body .app-shell .memory-editor .memory-editor-progress,
  html body main.app-shell .memory-editor .memory-editor-progress {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 34px !important;
    margin: -3px 0 12px !important;
    padding: 0 0 8px !important;
    gap: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body .app-shell .memory-editor .memory-editor-progress::before,
  html body main.app-shell .memory-editor .memory-editor-progress::before,
  html body .app-shell .memory-editor .memory-editor-progress::after,
  html body main.app-shell .memory-editor .memory-editor-progress::after {
    position: absolute !important;
    top: 13px !important;
    right: 72px !important;
    left: 0 !important;
    height: 3px !important;
    border-radius: 999px !important;
    content: "" !important;
    transform-origin: left center !important;
  }

  html body .app-shell .memory-editor .memory-editor-progress::before,
  html body main.app-shell .memory-editor .memory-editor-progress::before {
    background: rgba(7, 63, 82, 0.1) !important;
  }

  html body .app-shell .memory-editor .memory-editor-progress::after,
  html body main.app-shell .memory-editor .memory-editor-progress::after {
    background: linear-gradient(90deg, var(--capture-teal), var(--capture-teal-deep)) !important;
    transform: scaleX(var(--capture-progress, 0.2)) !important;
    transition: transform 180ms ease !important;
  }

  html body .app-shell .memory-editor .memory-editor-progress span,
  html body main.app-shell .memory-editor .memory-editor-progress span {
    display: none !important;
  }

  html body .app-shell .memory-editor .memory-editor-progress span.active,
  html body main.app-shell .memory-editor .memory-editor-progress span.active {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 62px !important;
    min-height: 27px !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    font-size: 0.62rem !important;
    white-space: nowrap !important;
  }

  html body .app-shell .memory-editor .memory-editor-progress i,
  html body main.app-shell .memory-editor .memory-editor-progress i {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .app-shell .memory-editor .memory-editor-progress::after,
  html body main.app-shell .memory-editor .memory-editor-progress::after {
    transition: none !important;
  }
}